在不使用 useReducer 的情况下并行更新两个 state

Question

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

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

我意识到原因是我必须在更新数字 state 之前更新 selectedNumber 的 state。 我知道仅使用 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;

Answer 1

您不会在传递给setNumbers的回调中返回任何内容。 因此，将返回undefined并且新的 state 变为undefined导致undefined.map(...

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

顺便说一句， useReducer因为你的 state 并不复杂