在 React 中使用 setTimeout 强制更新 state

Question

我正在构建一个 React 应用程序，但在更新 state 时遇到重新渲染问题。 基本上我只是操纵一堆 arrays 并需要在应用程序内部重新渲染。

所以我试着在 state 和“Voilà”的变化之前放置一个setTimeout ，它起作用了，现在我有很多setTimeouts更新状态，我知道这不是最好的方法，所以我的问题是：我怎么能在不使用超时的情况下执行此操作？

下面的示例是一个 function，当点击更新一个数组中的 object 中的值时：

const documentCopy = selectedDocument;
documentCopy.pages.find((page) =>
  page.id === id
    ? page.active === true
      ? (page.active = false)
      : (page.active = true)
    : null,
);
setTimeout(() => {
  setSelectedDocument(null);
  setSelectedDocument(documentCopy);
}, 1);

这是渲染实现：

{selectedDocument && selectedDocument.pages.map((page, i) => (
        <IconButton
            key={page.id}
            onClick={() => handleCheckImage(page.id)}
        >
            <img src={page.img}
                width='85'
                height='120'
                alt={'document'}
            />
            <Checkbox className={
                page.active
                    ? classes.imageBox
                    : classes.imageBoxHidden
                }
                checked={page.active}
                name={page.id}
                color='primary'
            />
        </IconButton>
    )
)}

基本上我只需要点击一张图片，当我点击该特定图片的复选框时，它会被选中或取消选中并显示在屏幕上。

对不起，我的英语不是很好，欢迎任何提示。

提前告诉你。

Answer 1

当 React 由于 state 更改而决定重新渲染时，它会查看之前的 state 和新的 state。然后确定它们是否不同并重新渲染组件。 如果之前的和新的 state 没有不同，它就不会重新渲染。 这适用于原始类型，因为当它们被保存时， memory 中的一个新部分被分配给该值。

然而，当比较 Arrays 时，它没有按预期工作。这与 Arrays 存储在 memory 中的方式有关。它们通过引用存储，而不是在 memory 中创建新值。这在下面的代码中显示，您会期望console.log打印 false，但它实际上打印 true。 这是因为arr1和arr2其实是同一个数组，因为它们指向memory中的同一个值。

 const arr1 = ['dog', 'cat', 'bird']; const arr2 = arr1; arr2.push('fish'); console.log(arr1 === arr2);

至于解决这个问题的一种方法是，当你在 state 中设置它时，你可以创建一个新数组。所以在你的情况下你可以做这样的事情来重新渲染。 该代码在 memory 中创建了一个全新的数组/值，其中包含您的原始 arrays 数据。

 setSelectedDocument([...documentCopy]);

超时工作的原因是因为您将 state 的值设置为 null，然后再到页面。 所以 React 认为这两者是不同的。

希望这会有所帮助，如果您有兴趣，请进一步阅读： https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0