我假设您正在尝试更改某些组件的状态。基于此，下面是一个完整的代码来解释这个问题。

const App = () => {
  const [inputData, setInputData] = React.useState({
    firstName: '',
    middleName: '',
    lastName: ''
  })
  // Using useEffect hook to log inputData instead of logging inside the handler function.
  React.useEffect(() => {
    console.log('inputData', inputData)
  })
  function handleData(e) {
    inputData[e.target.name] = e.target.value
    setInputData({ ...inputData }) // spreads out properties of InputData object
    console.log(setInputData) // setInputData is just a function
  }

  function handleData(e) {
    inputData[e.target.name] = e.target.value
    setInputData(inputData)
    console.log(setInputData) // setInputData is just a function
  }

  function handleData(e) {
    setInputData({ ...inputData, [e.target.name]: e.target.value })
  }

  return (
    <div id='app'>
      <form onSubmit={(e) => handleData(e)} >
        <input name='firstName' onChange={handleData} type='text' value={inputData.firstName} /><br />
        <input name='middleName' onChange={handleData} type='text' value={inputData.middleName} /><br />
        <input name='lastName' onChange={handleData} type='text' value={inputData.lastName} /><br />
        <input name='longName' onChange={handleData} type='text' value={inputData.longName || ''} /><br />

        <button type='submit'>Submit</button>
      </form>
      <div>
        <p>FirstName: {inputData.firstName}</p>
        <p>FirstName: {inputData.middleName}</p>
        <p>LastName: {inputData.lastName}</p>
        <p>LongName: {inputData.longName}</p>
      </div>
    </div>
  )
}

export default App

第一个是使用spread(...)操作符通过复制现有状态创建一个新对象。这是React中处理对象时更新状态的推荐方法。这确保了不变性。不变性是react中一个重要的概念。这篇博文深入探讨了React中的不变性。
第二个mutatesinputData状态直接，这就是为什么会有没有重新渲染，应该避免这种。它会导致重新呈现和更新UI的问题。相反，您可以使用spread运算符创建一个新对象来复制现有状态，然后更新新对象。
第三种是使用spread操作符创建一个新对象，复制现有状态，然后使用[e.target.name]: e.target.value更新新对象。这也是一种在React中更新状态的有效方法