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)中，该对象用我需要的所有数据填充得很好。然后，我为setValues中的每个对象调用newObj，但是无论如何，values对象将不会接收新数据。唯一更新的是selected: true，其他所有的都不会更新。

该如何解决？

Answer 1

您要在一个循环中多次调用setValues，并且每次这样做都会散布原始值，从而覆盖对先前setValues所做的所有操作。只有最后一个setValues可以正常工作，而恰好是selected: true

的setValues

如果需要基于状态的先前值进行更新，则应使用setValues的函数版本，如：

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

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

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

Answer 2

在示例中的任何地方都没有定义值。我的猜测是，这是一些缓存的副本，您应该使用状态设置程序的回调变体：

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

useState不会更新状态

2 个答案: