使用 setState 钩子修改数组 [重复]

Posted

技术标签:

【中文标题】使用 setState 钩子修改数组 [重复]【英文标题】:Modify an array with setState hook [duplicate] 【发布时间】:2020-12-07 18:20:38 【问题描述】:

我有一个 JSON 数组:

function createData(nom, age, poids, ) 
  return 
    nom,
    age,
    poids,

  ;


const [count, setCount] = useState([
  ]);
  
  
  setCount(count=>count.concat(createData("mathieu",15)))
  setCount(count=>count.concat(createData("jean",25)))
  setCount(count=>count.concat(createData("ginette",55)))




  setCount(count=>count[0].poids=13) // doesn't work

当 nom= mathieu 但不起作用时,我正在尝试在现有 json 数组中添加 poids=13。 你能帮我吗,我是反应钩子的新手。 谢谢

【问题讨论】:

你能澄清一下“不起作用”吗?这可能意味着任何事情。你得到一个错误?意外的输出? 【参考方案1】:

您的setCount() 回调应该返回状态的新值count[0].poids = 13 将返回 13。您还应该not modify state directly,虽然您使用setState,但您正在检索以前的状态并尝试直接更新它。

相反,您可以使用.map() 返回一个新的对象数组,这将是您的新状态。在.map() 回调中,您可以指定每个对象如何“转换”/更改。如果nom 是“mathieu”,您可以返回一个新转换的对象,否则,您可以简单地返回当前对象。

setCount(count => count.map(
  obj => obj.nom === "mathieu" ? ...obj, poids: 13 : obj
));

【讨论】:

只加一个参数更通用,(count,name),obj.nom === name...

以上是关于使用 setState 钩子修改数组 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

反应挂钩以根据先前的状态值更新状态[重复]

在对数组进行排序并传递它之后,React 钩子 useState/setState 不起作用

如何使用我的反应应用程序中的 useState 钩子给出的 setState 方法增加状态对象的选定索引的计数

如何在useEffect(func,[])中使用异步api调用中的setState钩子测试组件

在回调函数中使用 setState 挂钩时反应过多的重新渲染

在reactjs中删除重复项后如何从状态值和setstate创建数组