如何在反應鈎子中將屬性設置為 object？

Question

就像標題說的那樣，我怎樣才能只為我想要的 object 而不是兩者都更改 state？

  const [state, setState] = useState([
    { foo1: null, foo2: "" },
  ]);

  function setfoo1(e) {
    e.preventDefault();
    // How do i set foo1: "Hello World"
  }

Answer 1

您可以使用擴展運算符復制您希望保持不變的所有字段值，如下所示：

setState({...state, foo1: 'Hello World'});

Answer 2

傳播之前的 state 然后最后分配foo1 。 例如

setState({
  ...state,
  foo1: "Hello World"
})

Answer 3

雖然其他答案是有效的方法並且會解決問題，但它們讓我想知道一些事情。 為什么要使用具有許多特性的 state object？ useState 將與幾個一起使用。 您的組件變量 foo1 和 foo2 是該組件的 state。 為什么要拖出更改此 state 的代碼？ 另外，為什么不讓 react 為您管理您的 state object？

const [foo1, setFoo1] = useState(null);
const [foo2, setFoo2] = useState("");

// .. later foo1 changes
setFoo1("Hello world");