React Redux useEffect 不在初始页面渲染时加载数据

Question

我正在尝试从 api 渲染一个测验对象并使用 useEffect 来这样做，但它似乎不起作用。

这是我的测验组件：

export function Quiz(props) {
  const { 
    quiz, 
    fetchQuiz,
  } = props;

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

  return (
    <div id="wrapper">
      { quiz.question }
    </div>
  )
}

const mapStateToProps = state => {
  return {
    quiz: state.quiz,
  }
}

export default connect(mapStateToProps, {
  fetchQuiz,
})(Quiz)

我的动作创作者：

export function fetchQuiz() {
  return function (dispatch) {
    axios. get('http://localhost:9000/api/quiz/next')
        .then(res => {
          dispatch({ type: SET_QUIZ_INTO_STATE, payload: res.data })
        })
        .catch(err => console.error(err))
    }
}

我的减速器：

const initialQuizState = null
function quiz(state = initialQuizState, action) {
  switch(action.type) {
    case SET_QUIZ_INTO_STATE:
      return action.payload
    default:
      return state
  }
}

因此，当我 console.log 在我的测验组件中“测验”时，我得到了我期望的对象，一切都很好。但是，当我尝试调用“quiz.question”时，出现错误：无法读取 null 的属性（阅读问题）。这让我相信 useEffect 没有正确加载 api 中的数据。我是不是做错了什么？

Answer 1

从 DOM 中的 API 响应访问对象时，请确保您有条件检查是否完成，如下所示：

  return (
    <div id="wrapper">
      { quiz ? quiz.question : 'No Quiz Here' }
    </div>
  )
}

React Redux useEffect 不在初始页面渲染时加载数据

React Redux useEffect not loading data on initial page render

redux

react-redux

use-effect