如何将对象添加到反应钩子？

Posted 2023-02-21

【中文标题】如何将对象添加到反应钩子？

【英文标题】：How do I add an object to a react hook?

【发布时间】：2021-06-19 11:40:26

【问题描述】：

我希望将 michael 和 philip 都存储在状态挂钩中。

export const app = () => 
  const [state, setState] = useState(
    name: "michael",
    age: 55,
  );
  const name = "Philip";
  const age = 65;
  setState(...state, //How do I add the object with name: "Philip", age: 55 here?)
  return <div></div>;
;

【参考方案1】：

如果您希望在您的状态中保存更多相同的实体，您需要将其存储在列表中 - javascript 中的数组。

您想要的状态将如下所示：

const state = [
   name: "Michael", age: 55 ,
   name: "Philip", age: 65 
];

而初始状态是这样的：

const [state, setState] = React.useState([ name: "Michael", age: 55 ]);

^ 请注意您如何将对象包装在 []

中

要将新人添加到您的数组中，您可以执行以下操作：

setState([...state,  name: "Philip", age: 65 ])

^ 请注意，您实际上是如何通过复制前一个数组中的所有内容并添加一个新人来创建一个新数组

【参考方案2】：

你可以在状态中放置一个对象数组：

const [state, setState] = useState([
  name: "michael", age: 55
]);

setState((arr) => [..arr, name: "Philip", age: 55])

或者如果您想使用空数组来代替默认状态：

const [state, setState] = useState([]);
// ...
setState((arr) => [..arr, name: "michael", age: 55])
setState((arr) => [..arr, name: "Philip", age: 55])

每当您使用匿名对象调用setState 函数时，第一个参数将始终包含当前状态，在您的情况下是name: string, age: number 对象的数组。该匿名函数的返回值将返回一个包含 a 对象和现有对象的新数组：

setState((arr) => [
  ...arr, // existing objects
  name: "Philip", age: 55 // new object
])

你也可以不使用reducer直接设置新状态（上面例子中的匿名函数）

setState([
  ...state, // existing objects
  name: "Philip", age: 55 // new object
])

但这在处理异步代码时可能会导致一些问题（可以将陈旧状态复制到新状态中）。