useState 不会更新状态

Question

I'm trying to update a state using useState hook, however the state won't update.

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));
  };

When handleSelect is called, it creates the object newAddress , and then calls handleAddressSelection passing newAddress .

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

In console.log(newObj) the object is filled fine, with all the data I need. Then I call setValues for each object in newObj , however no matter what, the values object won't receive the new data. The only one that is updated is selected: true , all others won't update.

What should I do to fix it?

Answer 1

You're calling setValues multiple times in a loop, and every time you do so, you spread the original values, and thus overwrite anything that was done on the previous setValues. Only the very last setValues ends up working, which happens to be the one for selected: true

If you need to base your update on the previous value of the state, you should use the function version of setValues, as in:

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

But even better would be to only call setValues once. If you're calling it multiple times, then you're going to generate multiple renders. I'd do this:

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

Answer 2

Values is not even defined anywhere in your examples. My guess is, it's some cached copy and you should be using callback variant of the state setter instead:

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