在选择标签React中更新状态的困难

发布于 2025-02-11 15:31:01 字数 910 浏览 7 评论 0原文

我有一个简单的应用程序来生成随机颜色。但这仅在下一个更改上更新，我无法弄清楚如何使更新函数正常工作。

  const handleHueChange = (e) => {
    const newHue = e.target.value;
    setHueColor(newHue);
    setColor(randomColor({ hue: hueColor, luminosity: lum }));
    console.log(color, hueColor, lum);
  };

有函数，这里的选择

<form>
        <select
          name="hue"
          value={hueColor.value}
          onChange={(e) => handleHueChange(e)}
        >
          {hue.map((hue, idx) => (
            <option key={idx}>{hue}</option>
          ))}
        </select>
      </form>

，这里有一个链接到代码沙盒

https://codesandbox.io/s/brave-austin-ujv5xw?file=/src/app/app/app.js：1414-1673

使用效果是正确的值仅更新下一个渲染。

原文

I have a simple app to Generate a Random color. But it only updates on the next change and I can't figure out how to get an updater function to work.

  const handleHueChange = (e) => {
    const newHue = e.target.value;
    setHueColor(newHue);
    setColor(randomColor({ hue: hueColor, luminosity: lum }));
    console.log(color, hueColor, lum);
  };

There is the function and here it the select

<form>
        <select
          name="hue"
          value={hueColor.value}
          onChange={(e) => handleHueChange(e)}
        >
          {hue.map((hue, idx) => (
            <option key={idx}>{hue}</option>
          ))}
        </select>
      </form>

And here is a link to the code sandbox

https://codesandbox.io/s/brave-austin-ujv5xw?file=/src/App.js:1414-1673

The useeffect is giving the right value but it's only updating on the next render.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏佲洛 2025-02-18 15:31:01

您正在使用React 18，在此版本中，React将批量更改，这意味着React将将您的多个固定状态应用在一起，因此您必须在使用效果中使用setColor并将其从处理中删除，类似的事情：

useEffect(() => {
  setColor(randomColor({ hue: hueColor, luminosity: lum }));
}, [hueColor, lum]);

const handleHueChange = (e) => {
  const newHue = e.target.value;
  setHueColor(newHue);
};

const handleLumChange = (e) => {
  const newLum = e.target.value;
  setLum(newLum);
};

You are using react 18 and in this version react will batch the changes, which means that react will apply your multiple setState together so you have to use setColor in a useEffect and remove that from handleChanges, something like this:

useEffect(() => {
  setColor(randomColor({ hue: hueColor, luminosity: lum }));
}, [hueColor, lum]);

const handleHueChange = (e) => {
  const newHue = e.target.value;
  setHueColor(newHue);
};

const handleLumChange = (e) => {
  const newLum = e.target.value;
  setLum(newLum);
};

回复收藏 0 原文

我是有多爱你 2025-02-18 15:31:01

handlehuechange您正在更新huecolor，在下一行中，您认为可以立即使用该新状态，因此您写了setColor（RandomColor（RandomColor）光度：lum}））;，但是huecolor您在这里传递的仍然是旧的，因为您正在从Clousure读取它，这意味着只有在rerender之后您才能访问该新状态。解决方案是仅用setColor替换该行（RandomColor（{hue：newhue，Luminosity：Lum}））; - 您可以在这里看到，我正在使用newhue而不是HueColor为了更新颜色。