React Hook useEffect отсутствует зависимость, используя Redux - PullRequest
Новая
       4

React Hook useEffect отсутствует зависимость, используя Redux

0 голосов
/ 18 апреля 2020

Должен ли я игнорировать предупреждение «React Hook useEffect имеет отсутствующую зависимость»? Обычно, когда я получаю данные из API, это то, что я делаю: 

const Component = () => {
  const [data,setData] = useState([]);

  const getData = () => {
    //Getting data and set data code...
  }

  useEffect(()=>{
   getData();
  },[]);
}

, и недавно я пытаюсь использовать redux для того же (получение данных из API), и я получаю этот React Hook useEffect имеет отсутствующую зависимость 'предупреждение ...

действие: 

import {GET_POSTS} from './types';

const getPosts = () => (dispatch) => {
    const url = 'https://jsonplaceholder.typicode.com/posts';
    fetch(url)
    .then(res => res.json())
    .then(data => {
        dispatch({
            type: GET_POSTS,
            payload: data
        });
    });
}

export default getPosts;

редуктор: 

import {GET_POSTS} from '../actions/types';

const initialState = {
    posts: []
}

const postsReducer = (state = initialState, action) => {
    switch(action.type){
        case GET_POSTS:
            return {
                ...state,
                posts: action.payload
            }
        default:
            return state;
    }
}

export default postsReducer;

приложение. js: 

import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import Hello from './components/Hello';
import getPost from './actions/postsAction';
import './App.css';

const App = ({getPost, dispatch}) => {
  useEffect(() => {
    getPost();
  },[]);

  return (
    <div className='App'>
      <Hello/>
    </div>
  );
};

const mapdispatchtoprops = (dispatch) => ({
  dispatch,
  getPost: () => {
    dispatch(getPost());
  }
});

export default connect(null, mapdispatchtoprops)(App);

Есть ли способ решить эту проблему, я пытался поместить диспетчеризацию в массив useEffect, но предупреждение все еще отображается, например так: 

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

Это полное предупреждение: React Hook useEffect отсутствует зависимость: 'getPost'. Либо включите его, либо удалите массив зависимых реагирующих хуков / исчерпывающий-deps

Пытался удалить массив useEffect, но я получу бесконечное значение l oop, он просто будет получать данные из API ( Мне нужно только запустить его один раз).

Должен ли я игнорировать предупреждение? Если нет, то как лучше всего справиться с этой проблемой?

Я никогда не получал такого предупреждения раньше, когда оставлял массив useEffect пустым, но недавно получил его, почему?

Ответы [ 2 ]

0 голосов
/ 18 апреля 2020

Сообщение об ошибке говорит вам, что вам делать. Просто добавьте getData в массив зависимостей следующим образом: [dispatch, getData]. Все внешнее, на которое вы ссылаетесь в вашем useEffect (например, функция), должно быть частью списка зависимостей, чтобы оно могло вызывать эффект при каждом изменении значения. В вашем случае, скорее всего, нет, но React предупреждает вас, чтобы вы были в безопасности. Надеюсь, это поможет!

0 голосов
/ 18 апреля 2020

Возможно, вы захотите начать думать с другой точки зрения. Вы, очевидно, пытаетесь сделать побочный эффект загрузки данных после рендеринга компонента. Так что просто введите ваши данные через родительский или распространяющий реквизит от родителя и вообще удалите массив. Т.е. 

 const Component = ({posts}) => {

  const getData = () => {
    //Getting data and set data code...
  }

  useEffect(() => {
      if (!posts) {
       getData();
      }
  });
  ....
}

Ваши сообщения будут загружены один раз, и функция useEffect должна заботиться только о том, posts есть или нет.

...