时间戳

首页 > 解决方案 > 函数无法使用 useEffect 访问即时状态更改

javascript - 函数无法使用 useEffect 访问即时状态更改

问题描述

我正在尝试学习如何使用 Hooks

我正在渲染一个数组列表删除第一个元素onclick状态正在该handleclick函数中更新但它没有渲染

export default function App() {
  const [name, setName] = useState("");
  const [arry, setArry] = useState([1, 2, 3, 4, 5]);

  const _log = () => {
    let ar = arry;
    ar.shift();
    setArry(ar);
    console.log(arry, "log");
  };

  const renderlist = () => {
    console.log(arry, "--");
    if (arry.length > 1) {
      return arry.map((a) => <li>{a}</li>);
    }
  }; //

  return (
    <div className="App">
      <button onClick={_log}>shift</button>
      {renderlist()}
    </div>
  );
} ```

标签： javascriptreactjsreact-hooks

解决方案

您需要将不同的值（数组）传递给setArry. 因为useState被优化为不改变值 if newValue === currValue。

你传递了相同的数组，因为你改变了它，这是 React 中的反模式（正如你在行动中看到的那样）。

  const _log = () => {
    const [_, ...ar] = arry;
    setArry(ar);
    // or setArry(([_, ...ar]) => ar);
    console.log(arry, "log");
  };

推荐阅读