Dva: Problemas con React Hooks y dva

Creado en 27 jun. 2019  ·  30Comentarios  ·  Fuente: dvajs/dva

import { connect } from 'dva';
import React, { useEffect } from 'react';

const Page = props => {
  const { dispatch, text } = props;
  useEffect(() => {
    dispatch({ type: 'xxx/fetchText' });
  }, []);

 return <div>{text}</div>
}

export default connect(({ xxx }) => ({ text: xxx.text }))(Page);

Si está escrito así, la regla react-hooks/exhaustive-deps React Hook useEffect has a missing dependency: dispatch. lo solicitará al verificar
Pero si el envío se agrega a DependencyList de useEffect, las solicitudes en él se ejecutarán continuamente.¿Cómo debo escribirlo cuando uso React Hooks en combinación con dva?

wontfix

Comentario más útil

Todos 30 comentarios

useDispatch, después de usar ganchos, no necesita conectarse, pero para ser perezoso, saqué todos los efectos y reductores de la tienda, busqué en el espacio de nombres y devolví todas las acciones, consulte:

function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

useDispatch, después de usar ganchos, no necesita conectarse, pero para ser perezoso, saqué todos los efectos y reductores de la tienda, busqué en el espacio de nombres y devolví todas las acciones, consulte:

function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

image
Los funcionarios parecen haber eliminado el uso de useDispatch().
Ahora
imageusar de esta manera

¿Dónde se elimina @UlyC , puede dar un enlace?

¿Dónde se elimina @UlyC , puede dar un enlace?

Me equivoqué.
No hay uso de useDispatch() en la API oficial de React Hooks en https://reactjs.org/docs/hooks-reference.html ,
Este es el uso de react-redux https://react-redux.js.org/next/api/hooks#useddispatch , para importar desde react-redux
import { useDispatch } from 'react-redux'

¿Dónde se elimina @UlyC , puede dar un enlace?

Me equivoqué.
No hay uso de useDispatch() en la API oficial de React Hooks en https://reactjs.org/docs/hooks-reference.html ,
Este es el uso de react-redux https://react-redux.js.org/next/api/hooks#useddispatch , para importar desde react-redux
import { useDispatch } from 'react-redux'

= - bien

~ const dispatch = useDispatch(); hooks ¿No lo prometes? ~
El efecto se agrega a Promise en dva

¿Ha considerado dva/umi integrar ganchos? Si quieres usarlo, ¿tienes que usar import { useDispatch } from 'react-redux' así? ¿Habrá agujeros?

image

Lo usé, no hay problema.

@yoyo837
````
importar { useDispatch } desde 'dva';

console.log('6:23:08 PM', useDispatch)
````
Imprimo indefinido así.¿Debo actualizar react-redux?a que version

actualizar dva última versión beta

es mejor que mires los lanzamientos

Espero actualizar el documento después de la actualización. No he descubierto qué está haciendo la función useDispatch.

dva se deriva directamente de react-redux useDispatch , solo puede mirar el documento react-redux

image

https://react-redux.js.org/api/hooks#useddispatch

1. Actualice dva a la última versión (mi versión es 2.6.0-beta.12)
2.image

Dirección de referencia: https://react-redux.js.org/api/hooks
espero ser de ayuda

Antd Pro V4 se actualizó a 2.6beta 12 y se puede usar normalmente, pero el tipo de informe de conexión es incorrecto. El siguiente es el mensaje de error de TableList, ¿cómo solucionarlo?

作为表达式调用时,无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.

@wangzhipeng404 Use ganchos y no necesite conectar componentes

Pero el diseño y el bloque del pro framework use conect, ¿tengo que cambiarlos yo mismo? ¿Hay alguna forma de corregir rápidamente este tipo de errores?

Escribí un caso de prueba simple, el siguiente código está escrito de manera normal y se puede usar normalmente

import React, { Component } from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

@connect(({ products }) => ({
  products,
}))
export default class Products extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/fetch',
    });
  }
  handleDelete = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  render() {
    const { products } = this.props;
    return (
      <div>
        <h2>List of Products</h2>
        <ProductList onDelete={this.handleDelete} products={products} />
      </div>
    );
  }
}

Más tarde, me referí a https://react-redux.js.org/next/api/hooks y quería reescribirlo en ganchos.

import React, { useEffect } from 'react';
// import { connect } from 'dva';
import ProductList from '../components/ProductList';
import { useSelector, useDispatch } from 'react-redux';

// https://react-redux.js.org/next/api/hooks

export default function Products() {
  console.info(`useDispatch: `,useDispatch)
  const dispatch = useDispatch();
  const products = useSelector(state => state.products);
  useEffect(() => {
    dispatch({
      type: 'products/fetch',
    });
  });
  const handleDelete = id => {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
}

pero esta vez da error

image

Espero firmemente apoyar los ganchos.

@liudonghua123 pregunta esta vez tan rápido como echar un vistazo al código fuente de dva.Su código a continuación no usa dva y no cumple con lo requerido por react-redux, Use dva para hacer esto por usted, es extraño si puede usarlo.

@ liudonghua123 El llamado ejemplo utilizable anterior es imposible de usar sin cargar la inicialización de dva, y dva simplemente exporta directamente la conexión, useSelector y otros métodos de react-redux.

@ yoyo837 El código que puedo usar normalmente arriba es parte del código, la parte de inicialización de dva está en otra parte, no lo escribí todo aquí, el código está escrito con referencia a https://dvajs.com/guide/getting- iniciado.html , acabo de subir a github, https://github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js , la rama de ganchos es problemática, la rama maestra se puede usar normalmente

Probé la actualización de dva a 2.6.0-beta.14 como se mencionó anteriormente, el código se puede usar normalmente sin modificaciones, pero para la unificación, useSelector , useDispatch cambió de dva la exportación es un poco mejor todas las modificaciones son
https://github.com/liudonghua123/dva-inicio-rápido/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

Pero el diseño y el bloque del pro framework use conect, ¿tengo que cambiarlos yo mismo? ¿Hay alguna forma de corregir rápidamente este tipo de errores?

Hola, solucionaste este problema?La versión dva_beta utilizada en antd-pro-ts parece informar un error

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Se siente como si hubiera muchas cosas dentro

@ liudonghua123 El llamado ejemplo utilizable anterior es imposible de usar sin cargar la inicialización de dva, y dva simplemente exporta directamente la conexión, useSelector y otros métodos de react-redux.

Tiene sentido, realmente no parece poder mezclarlo, no es el mismo principio.

Antd Pro V4 se actualizó a 2.6beta 12 y se puede usar normalmente, pero el tipo de informe de conexión es incorrecto. El siguiente es el mensaje de error de TableList, ¿cómo solucionarlo?

作为表达式调用时,无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.

Yo también tengo este problema, lo solucionaste?

Con gancho, no necesita usar conectar nuevamente.

Con gancho, no necesita usar conectar nuevamente.

Bueno, pero el proyecto se escribió antes con componentes de clase, y la carga de trabajo de refactorización con ganchos es un poco pesada, y este tipo de advertencia parece demasiado molesto.

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

¿Fue útil esta página
0 / 5 - 0 calificaciones