ReactJS,挂钩-如何在.map()函数之后设置状态?

时间:2020-03-16 15:56:28

标签: javascript reactjs react-hooks

我正在尝试使用数组中的值更改状态。示例:

const [state, setState] = useState({});
const test = [1, 2, 3];
        test.map((item, i) => {
          setState({ ...state, [`item-${i}`]: item });
        });

当前状态为:

item-2: 3

我想要实现的是:

item-0: 1,
item-1: 2,
item-2: 3

我尝试了几种方法(看起来都相似),但是效果是一样的://有人知道如何解决吗?

谢谢!

2 个答案:

答案 0 :(得分:2)

您可以使用forEach()这样的方法来更新状态:

test.forEach((item, i) => {
   setState(state => ({...state, [`item-${i}`]: item}));
});

答案 1 :(得分:1)

您可以使用set状态和reduce的功能版本来完成此操作:

  setState(prevState => {
    return test.reduce((acc, next, i) => {
      return {
        ...acc,
        [`item-${i}`]: next
      },
    }, prevState);
  });

这具有一次调用即可完成的优点,并且更易于阅读。