1

我正在开发一个应用程序，其中我有一组从服务器（Ajax）获得的数据，这些数据呈现在屏幕上。

要选择我想要渲染的位置（Array[0]、Array[1]、Array[2]），我有一个组件在 select 选项（handle onChange）上选择它，在 localStorage 上写入该选项。然后，在渲染数据代码上，我将这个 localStorage 值作为位置变量。

由于 ReactJS 不会在每一帧都重新渲染屏幕，所以我必须指出 React 他必须重新渲染屏幕才能显示不同的数据位置。

为此，我有一个 Hook：

function useForceUpdate() {
    const [value, setValue] = useState(0);
    return () => setValue((value) => ++value);
}
const forceUpdate = useForceUpdate();

问题是，如果我在选择组件的句柄上调用这个钩子，它不会更新渲染。但是，如果您对选择进行第二次更改（基本上，您再次调用 Hook），它会绘制最后一个选项（因此，如果您第一次选择了 value=1.. 的选项。然后您选择value=2 的选项，它绘制 value=1)。

我添加了一个按钮来调用该功能（按钮-> forceRe-Render），它可以工作。因此，如果您选择任何选项并单击按钮，它会显示正确的信息。

PS：检查localStorage，它工作正常，所以不是localStorage的问题。

这是它的摘要的代码框：

https://codesandbox.io/s/sparkling-glitter-s830r?fontsize=14&hidenavigation=1&theme=dark

4

0 回答 0