在不使用 useReducer 的情况下并行更新两个状态答案

【问题标题】：updating two state in parallel without using useReducer在不使用 useReducer 的情况下并行更新两个状态
【发布时间】：2022-01-23 23:41:57
【问题描述】：

在这段代码中，当我单击删除按钮时出现此错误：

App.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

我意识到原因是我必须在更新数字状态之前更新 selectedNumber 的状态。我知道仅使用 useState 是不可能的。我意识到我可以用 useReducer 做到这一点。我是对的还是没有 useReducer 的另一种方法？

import { useState } from "react";

const App = () => {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5, 6]);
  const [selectedNumber, setselectedNumber] = useState(1);

  return (
    <div>
      <ul>
        {numbers.map((number) => {
          return (
            <li
              key={number}
              onClick={() => setselectedNumber(number)}
              style={
                number === selectedNumber ? { color: "blue" } : { color: "red" }
              }
            >
              {number}
            </li>
          );
        })}
      </ul>
      <div>
        {selectedNumber}
        <button
          onClick={() =>
            setNumbers((prev) => {
              prev.filter((number) => number !== selectedNumber);
            })
          }
        >
          delete
        </button>
      </div>
    </div>
  );
};

export default App;

【问题讨论】：

标签： javascript reactjs react-hooks use-state use-reducer

【解决方案1】：

在传递给setNumbers 的回调中，您没有返回任何内容。因此，undefined 将被返回，新状态变为 undefined 导致 undefined.map(...

<button
    onClick={() =>
        setNumbers((prev) => {
            return prev.filter((number) => number !== selectedNumber);
        })
    }
>
    delete
</button>

顺便说一句，useReducer 不需要，因为您的状态并不复杂

【讨论】：