【问题标题】：React Native old data state gotchaReact Native 旧数据状态问题
【发布时间】：2021-09-06 20:41:09
【问题描述】：

react native（react?）中有一个“陷阱”，如果您使用先前状态的数据更新状态，它不会识别状态更改，也不会重新渲染。有人可以提醒我解决此问题以在收到更新数据时重新呈现状态吗？

示例代码：应该重新渲染状态，但不会因为状态无法识别更改

  const [images, setImages] = useState([]);

  const addImage = async (data) => {
    let oldImages = images;

    oldImages.push({
      url: data,
      order: images.length + 1,
    });
    setImages(oldImages);
  };

【问题讨论】：

这不是问题所在。问题是你不要推动，因为它会改变状态。您需要复制数组并使用全新的数组引用。 let oldImages = images 仍在改变原始数组。

标签： javascript reactjs react-native

【解决方案1】：

问题

当你这样做时：

let oldImages = images;

您将images 的引用分配给oldImages。在底层，React 本质上进行了严格的相等比较 (===) 以确定是否重新渲染（非常简单的解释，请参阅 reference 了解上下文）。由于oldImages 是对images（当前状态）的引用，因此比较结果将得出它们彼此相等。因此 React 不会重新渲染。

解决方案

创建一个新数组，使引用不相等：

const [images, setImages] = useState([]);

const addImage = async (data) => {
  setImages([
    ...images,
    {
      url: data,
      order: images.length + 1,
    },
  ]);
};

【讨论】：

【解决方案2】：

我找到了我正在寻找的解决方法，您只需要将旧数据用省略号括在数组括号中

 const [images, setImages] = useState([]);

  const addImage = async (data) => {
    let oldImages = [...images];

    oldImages.push({
      url: data,
      order: images.length + 1,
    });
    setImages(oldImages);
  };

【讨论】：

【解决方案3】：

其他答案已经解释了如何解决您的问题，我将提供一个示例来向您展示您的代码发生了什么突变以及如何从 vanilla JS 修复它

const vehicles = ['bus', 'car'];

const oldVehicles = vehicles;

oldVehicles.push('van');

console.log(vehicles)
console.log(oldVehicles)

从上面给出的示例中，您可以看到我们只将van 推送到oldVehicles，但是当我们打印vehicles 时，我们可以清楚地看到van 也在vehicles 中。这就是我们所说的数组通过引用共享的意思const oldVehicles = vehicles

要修复上述代码示例，您需要创建一个新引用而不是共享引用，如下所示

const vehicles = ['bus', 'car'];

const oldVehicles = [...vehicles]; // <== here

oldVehicles.push('van');

console.log(vehicles)
console.log(oldVehicles)

【讨论】：