反应清除所有键而不是浅合并单个键

Question

我从 API 中提取数据，然后允许用户在 React 中修改该数据，之后我会将更新后的状态发送到服务器。

我的API提供以下JSON：

{
    "id": 1,
    "title": "Test Campaign",
    "impressions": 12,
}

我的组件看起来像这样：

function Campaign() {

  const [data, setData] = useState([])

  useEffect(async () => {
    const result = await axios('/campaigns/1')
    setData(result.data);
  }, []);

  const handleChange = (event) => {
    setData({[event.target.name]: event.target.value});
  }

  return (
    <div className='row'>
      <div className='col-12'>
        <h2>{ data.title }</h2>
        <input
          type='number'
          value={data.impressions}
          name='impressions'
          onChange={e => handleChange(e)}
        />
      </div>
    </div>
  )
}

但是，运行这段代码会导致 data 状态下的所有键被覆盖（因此我的 h2 标签什么都不显示）。据我了解，React State 进行了浅合并，因此在这种情况下只会更新 impressions key:value?

Answer 1

功能组件的 useState 钩子实际上并没有浅合并状态更新，所以你需要自己管理它。

使用functional state update访问前一个状态浅拷贝到下一个状态。

Note

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

您可能还想确保保持状态不变。由于您是通过键值对更新状态，因此我假设您 实际上 使用对象。

const [data, setData] = useState({}); // <-- empty object initial state

const handleChange = (event) => {
  setData(data => ({
    ...data, // <-- shallow copy existing state
    [event.target.name]: event.target.value,
  }));
}

反应清除所有键而不是浅合并单个键

React clearing all keys rather than shallow merging single key

javascript

reactjs

use-state