Question

在我的React功能组件中，例如，我有一些数据。

{ name:"Abdelrahman", age:"25", id:"1" }

我需要能够使用useState钩子来更新此对象中的字段。如何使用？

const [name, setName] = useState([{name:"Abdelrahman", age:"25", id:"1"}]}

setName仅会更新名称，那么如何更新年龄呢？

Answer 1

您为状态变量定义的名称只是作为参数传递给useState的所有数据的别名。命名由您决定。.在这里，我将其更改为与应有的名称更相关的名称，这将更加清楚。

const [users, setUsers] = useState([{ name:"Abdelrahman", age:"25", id:"1" }]}

此处的别名users等效于[{ name:"Abdelrahman", age:"25", id:"1" }]。
您可以通过添加新用户。

const newUser = { name:"BillyBob", age:"50", id:"2" }
setUsers([...users, newUser]);

或者您也可以更改用户的年龄（ID为1）：

setUsers(users.map(user => user.id === 1 ? {...user, age: 10}));

这里要记住的主要事情是，您在setUsers内部传递的内容将替换以前存在的内容（其行为与类组件setState方法不同）。

Answer 2

有两件事可以帮助您思考是否正确理解。首先：

const [name，setName] = useState（“”）

useState中的空字符串是默认值。

Querybuilders

因此，从以上代码中您可以理解，只要更改输入，就会调用onChange处理程序，该处理程序将更新ElasticSearch。

优化：

import React, { useState } from "react";

export default function App() {
  const [name, setName] = useState("")
  return (
    <input type="text" onChange={e => setName(e.target.value)} />
  );
}

使用useCallback来记住您的处理程序。

类似地，如果需要，可以为年龄设置单独的状态。

Answer 3

您需要了解的第一件事是名称和 setName 是用户定义的，您可以输入所需的任何名称。您放置 setName 并不意味着您将只能更新给定对象的名称。 setName 可以更新数组内对象的每个键值对，即 [{name：“ Abdelrahman”，age：“ 25”，id：“ 1”}] < / p>

const [name, setName] = useState([{name:"Abdelrahman", age:"25", id:"1"}]

这里 name 指的是整个数组对象，即name = [{name：“ Abdelrahman”，age：“ 25”，id：“ 1”}]

要更新年龄，您可以使用

这样的写代码

onClick = {()=> setName(name.map(item => item.id == 1 ? {...item, age: "40"})}

如何在useState（）中将setState（）与多个项目一起使用

3 个答案: