0

我尝试使用useStateinside设置状态useEffect没有问题，代码如下：

import React, {useState, useEffect} from 'react';

const Banner = () => {
  const [title, setTitle] = useState([]);
  
  useEffect(() => {
    async function fetchData() {
      const api = 'some api url';
      let response = await fetch(api);
      response = await response.json();
      setTitle(response.title);
    }
    fetchData();
  })
}

export default Banner;

现在我想做同样的事情，但使用 useReducer，我尝试将上面的代码修改为以下但没有运气：

import React, {useState, useEffect} from 'react';

const bannerReducer = (state, action) => {
  switch(action.type) {
    case 'setTitle':
      return {
        ...state,
        title: state.title
      }
  }
}

const [state, dispatch] = useReducer(bannerReducer, {title: []});

const Banner = () => {
  const [title, setTitle] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const api = 'some api url';
      let response = await fetch(api);
      response = await response.json();
      dispatch({type: 'setTitle', response.title});
    }
    fetchData();
  })
}

export default Banner;

在这种情况下如何使用 useReducer？

4

2 回答 2

0

您的useReducer调用不在函数内部，因此不会附加到它。像这样称呼它：

const Banner = () => {
  const [title, setTitle] = useState([]);
  const [state, dispatch] = useReducer(bannerReducer, {title: []});

  useEffect(() => {
    async function fetchData() {
      const api = 'some api url';
      let response = await fetch(api);
      response = await response.json();
      dispatch({type: 'setTitle', response.title});
    }
    fetchData();
  }, []);
}

还要记住，useEffect每次Banner调用函数时都会运行。考虑添加一个依赖数组，如钩子教程中所述：https ://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

于 2020-09-10T19:42:14.623 回答
0

您正在使用与以前相同的 state 属性设置减速器，在这种情况下，您基本上是在做：

title: state.title

而且由于您的默认状态是具有空数组值的标题，因此您不会更改任何内容。

你需要在你的 reducer 中使用 action 参数来完成你想要的：

const bannerReducer = (state, action) => {
 switch(action.type) {
  case 'setTitle':
   return {
    ...state,
    title: action.title
   }
  }
}

你的调度应该是这样的：

dispatch({type: 'setTitle', title: response.title});
于 2020-09-10T19:44:46.270 回答