React Hook useEffect имеет недостающие свойства зависимостей - PullRequest
Новая
       144

React Hook useEffect имеет недостающие свойства зависимостей

1 голос
/ 01 августа 2020

В моем приложении response / redux у меня есть действие, которое вызывается для извлечения данных из состояния в redux каждый раз, когда компонент монтируется. Мой способ не работает.

Ниже я получаю ошибку:

React Hook useEffect имеет недостающую зависимость: 'props'. Либо включите его, либо удалите массив зависимостей. Однако 'props' изменится, когда any prop изменится, поэтому предпочтительным исправлением является деструктуризация объекта 'props' вне вызова useEffect и ссылка на указанные c props внутри useEffect react-hooks / исчерпывающий-deps

Вот мой код: 

import { getInvoiceData } from "../../actions/tables"

const TableSection = (props) =>{

  useEffect(() => {
    props.getInvoiceData();
  }, []);


  const classes = useStyles();

(...)

TableSection.propTypes = {
  invoiceData: PropTypes.object
};

const mapStateToProps = (state) => ({
  invoiceData: state.tables.invoiceData,
});

export default connect(mapStateToProps, { getInvoiceData })(TableSection);

Ответы [ 2 ]

1 голос
/ 01 августа 2020

с использованием хуков response-redux, таких как useSelector и useDispatch, минимизирует ваше рабочее время, вот ваш код с хуками response-redux: 

import { getInvoiceData } from "../../actions/tables"
import {useSelector ,useDispatch} from "react-redux"

const TableSection = (props) =>{
const {invoiceData} = useSelector(state=>state.tables)
const dispatch = useDispatch()

  useEffect(() => {
   dispatch(getInvoiceData())
  }, []);


  const classes = useStyles();

return (<div>
{// here do something with invoiceData}
{invoiceData && invoiceData.map(...)}
</div>)
}
TableSection.propTypes = {
  invoiceData: PropTypes.object
};

export default TableSection;
1 голос
/ 01 августа 2020

Массив зависимостей, который вы передаете в useEffect(), пуст, но вы используете props. getInvoiceData() внутри него, поэтому в нем отсутствует props. Добавьте его так: 

  useEffect(() => {
    props.getInvoiceData();
  }, [props]);

Лучше было бы разобрать ваши реквизиты: 

const TableSection = ({invoiceData , getInvoiceData}) =>{

  useEffect(() => {
   getInvoiceData();
  }, [getInvoiceData]);
  
  // Use invoiceData here
  console.log(invoiceData);

Зависимости используются, чтобы useEffect() знал, должен ли он снова сработать или нет. Поскольку ваш getInvoiceData является функцией, в этом случае он будет срабатывать только один раз, как и componentDidMount().

...