reactjs - 如何使用 useEffect 从 Redux 存储中的状态更新 React UI

Question

我有以下功能组件。我做了调试并阅读了一些关于 react-redux 和 useEffect 的帖子，但仍然没有成功。在初始渲染时，我的 redux 存储中的状态为空，但随后更改以反射(reflect)数据的新状态。但是，我的 react UI 没有反射(reflect)这一点。我知道问题是什么，但我不知道如何解决它。就从我在 redux 存储中的更新状态获取数据而言，我可能以错误的方式做事。

这是我的组件:

const Games = (props) => {
    const [gamesData, setGamesData] = useState(null)
    const [gameData, setGameData] = useState(null)
    const [gameDate, setGameDate] = useState(new Date(2020, 2, 10))    
    const classes = GamesStyles()

    // infinite render if placed in 
    // useEffect array
    const {gamesProp} = props
    useEffect(() => {
        
        function requestGames() {
            var date = parseDate(gameDate)            
            try {                
                props.getGames(`${date}`)
                // prints null, even though state has changed
                 console.log(props.gamesProp)
                setGamesData(props.gamesProp)

            } catch (error) {
                console.log(error)
            }
        }    
        requestGames()
    }, [gameDate])
    

    // data has not been loaded yet
    if (gamesData == null) {
        return (
            <div>
                <Spinner />
            </div>
        )
    } else {
        console.log(gamesData)

        return (
           <div><p>Data has been loaded<p><div>
           {/* this is where i would change gameDate */}
        )
    }
}

const mapStateToProps = (state) => {
    return {
        gamesProp: state.gamesReducer.games,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getGames: (url) => dispatch(actions.getGames(url)),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Games)

这是我的 reducer

import {GET_GAMES} from '../actions/types'


const initialState = {
    games: null // what we're fetching from backend
}

export default function(state = initialState, action){
    switch(action.type){
        
        case GET_GAMES:
            // prints correct data from state
            //console.log(action.payload)
            
            return{
                ...state,                 
                games: action.payload
            }
           
        default:
            return state
    }
}

这是我的 Action

import axios from 'axios'
import {GET_GAMES} from './types'


// all our request go here

// GET GAMES
export const getGames = (date) => dispatch => {
    
    //console.log('Date', date)
    axios.get(`http://127.0.0.1:8000/games/${date}`)
    .then(res => {
        
        dispatch({            
            type: GET_GAMES,
            payload: res.data
        })
    }).catch(err => console.log(err))

}

当我将 state 中的 props 放入 useEffect 的依赖项数组中时，state 会更新，但会导致无限渲染，因为 props 正在发生变化。即使我破坏 Prop 也会发生这种情况。

这是在初始渲染上更新后我的 redux 状态的图像。

Answer 1

您遇到问题是因为您试图根据 closure 中的数据设置状态.即使父数据更改，您拥有的 useEffect 中的 props.gamesProp 也永远不会更新。

props.gamesProp 在 effect 中为 null 的原因是因为在每次渲染中，你的组件本质上都有一个新的 props 实例，所以当 useEffect 运行时，内部的 props 版本useEffect 看到的部分是该渲染中存在的任何内容。

Any function inside a component, including event handlers and effects, “sees” the props and state from the render it was created in.

https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function

除非您必须在组件中修改 gamesState，否则我强烈建议您不要将 Prop 复制到状态。

我还建议使用 useDispatch 和 useSelector 而不是函数组件的连接。

根据我目前在其中看到的内容和我刚才描述的内容，对您的组件进行一些修改:

import { useDispatch, useSelector } from 'react-redux';

const Games = (props) => {
  const gamesData = useSelector((state) => state.gamesReducer.games);
  const dispatch = useDispatch();
  const [gameData, setGameData] = useState(null);
  const [gameDate, setGameDate] = useState(new Date(2020, 2, 10));
  const classes = GamesStyles();

  // infinite render if placed in
  // useEffect array
  useEffect(() => {
    const date = parseDate(gameDate);
    try {
      dispatch(actions.getGames(`${date}`));
    } catch (error) {
      console.log(error);
    }
  }, [gameDate, dispatch]);

  // data has not been loaded yet
  if (gamesData == null) {
    return (
      <div>
        <Spinner />
      </div>
    );
  } else {
    console.log(gamesData);

    return (
      <div>
        <p>Data has been loaded</p>
      </div>
      // this is where i would change gameDate
    );
  }
};

export default Games;

如果你需要从你的 props 中获取你的状态，React Documentation on hooks 必须这样说:

https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops