useState 不会更新状态

Question

我正在尝试使用 useState 挂钩更新状态，但是状态不会更新。

const handleSelect = address => {
    geocodeByAddress(address)
      .then(address => {
        const receivedAddress = address[0];
        const newAddress = {
          street: receivedAddress.address_components[1].long_name,
          number: receivedAddress.address_components[0].long_name,
          city: receivedAddress.address_components[3].long_name,
          country: receivedAddress.address_components[5].long_name,
          zip: receivedAddress.address_components[6].long_name,
          selected: true
        };
        handleAddressSelection(newAddress);
      })
      .catch(error => console.log(error));
  };

调用handleSelect时，它创建对象newAddress，然后调用handleAddressSelection传递newAddress。

function handleAddressSelection(newObj) {
    console.log(newObj);
    Object.keys(newObj).forEach(function(key) {
      setValues({ ...values, [key]: newObj[key] });
    });
  }

在 console.log(newObj) 中，对象填充得很好，包含我需要的所有数据。然后我为 newObj 中的每个对象调用 setValues，但是无论如何，values 对象都不会接收到新数据。唯一更新的是selected: true，其他的都不会更新。

我应该怎么做才能解决它？

Answer 1

您在一个循环中多次调用 setValues，每次调用时，您都会传播原始值，从而覆盖在之前的 setValues 上所做的任何事情.只有最后一个 setValues 最终起作用，恰好是 selected: true

如果您需要根据状态的先前值进行更新，您应该使用 setValues 的函数版本，如：

Object.keys(newObj).forEach(function(key) {
  setValues(oldValues => ({ ...oldValues, [key]: newObj[key] }));
});

但更好的方法是只调用一次 setValues。如果您多次调用它，那么您将生成多个渲染。我会这样做：

setValues(oldValues => ({...oldValues, ...newObj}));

Answer 2

您的示例中甚至都没有定义值。我的猜测是，它是一些缓存副本，您应该使用状态 setter 的回调变体：

setValues(previousValues => ({ ...previousValues, [key]: newObj[key] }));

useState 不会更新状态

useState won't update state

javascript

reactjs

react-hooks