如何在 React 中更改解构对象的值？

Question

我正在按照指南学习反应，但它已经过时了。我想更改 person 对象内“weight”内的值，但是每当我切换 onChange 时，我都会收到一个错误提示，控制台说 person.setState 不是函数。

 const person = {
    weight : '',
  };
  
  const { weight } = person;
  
  const handleClick = (event) => {
      person.setState({weight : event.target.value});
      console.log(person);
  }
  
  return( 
        //  <button onClick = {(event) => console.log(objectData.inputText)}>Button</button>
        <input placeholder='weight' onChange={handleClick}></input>
  )

Answer 1

如果您正在学习函数组件教程，您的代码可能应该如下所示。

1. 使用

   useState

   钩子初始化状态（作为空字符串）。
2. 使用状态函数

   setWeight

   更新状态。
3. 也许给你的经理起一个更合适的名字（

   handleChange

   而不是

   handleClick

   ）。

我已经包含了一个单独的段落来显示您更改输入值时状态的变化。

const { useState } = React;

function Example() {

  const [ weight, setWeight ] = useState('');

  function handleChange(e) {
    setWeight(e.target.value);
  }

  return (
    <section>
      <input
        placeholder="weight"
        value={weight}
        onChange={handleChange}
      />
      <p>{weight}</p>
    </section>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

如果你想要一个对象作为初始化状态，代码会略有不同。

1. 你的输入应该有一个

   name

   属性
2. 您的处理程序应该从

   e.target

   中解构名称和值。
3. 你的

   setPerson

   回调应该采用以前的状态，并使用名称和值来更新对象。

const { useState } = React;

function Example() {

  const [ person, setPerson ] = useState({ weight: '' });

  function handleChange(e) {
    const { name, value } = e.target;
    setPerson(prev => {
      return { ...prev, [name]: value };
    });
  }

  return (
    <section>
      <input
        name="weight"
        placeholder="weight"
        value={person.weight}
        onChange={handleChange}
      />
      <p>{person.weight}</p>
    </section>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>