如何在 React 回调后动态更改状态的对象值？

Question

菜鸟问题。考虑一下下面的代码片段：

export const Parent = ({data}) => {
  const [myData, setShowResults] = useState({isOpen: false, title: 'test'})

  function handleCheck(evt) {
      console.log(evt.currentTarget.textContent);
      //how to change current myData.title with evt.currentTarget.textContent?

  }
  return (
    <div className='c-dropdown'>
        <Child data={data} isOpen={myData.isOpen} onCheck={handleCheck}/>
        <p>{myData.title}</p>
    </div>
  );
}

在 handleCheck 回调函数中，我收到了所需的信息，但我找不到如何用新收到的信息更改 myData.title 的方法。

Answer 1

使用功能状态更新并浅拷贝先前的状态对象。

示例：

function handleCheck(evt) {
  const { textContent } = evt.currentTarget;
  console.log(textContent);
  setShowResults(data => ({
    ...data,            // <-- copy previous state
    title: textContent, // <-- update property
  }));
}

如何在 React 回调后动态更改状态的对象值？

How to dynamically change object values of a state after a callback in React?

state

reactjs

react-hooks