react setState

更改state 中的对象

 const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

修改：

setPerson({

        ...person, // 复制上一个 person 中的所有字段

        firstName: e.target.value // 但是覆盖 firstName 字段

});

更新一个嵌套象

const [person, setPerson] = useState({

        name: 'Niki de Saint Phalle',

        artwork: {

                title: 'Blue Nana',

                city: 'Hamburg',

                image: 'https://i.imgur.com/Sd1AgUOm.jpg',

        }

});

修改

setPerson({

...person, // 复制其它字段的数据

artwork: { // 替换 artwork 字段

...person.artwork, // 复制之前 person.artwork 中的数据

city: 'New Delhi' // 但是将 city 的值替换为 New Delhi！

}

});

使用immer 编写更简单的逻辑

import { useImmer } from 'use-immer';

  const [person, updatePerson] = useImmer({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

修改

function handleNameChange(e) {
    updatePerson(draft => {
      draft.name = e.target.value;
    });
  }

function handleTitleChange(e) {
    updatePerson(draft => {
      draft.artwork.title = e.target.value;
    });
  }