时间戳

首页 > 解决方案 > 如何在 React 中使用 useState Hook 更改/添加数组的某一行的值

javascript - 如何在 React 中使用 useState Hook 更改/添加数组的某一行的值

问题描述

我有一个以下数组，

const bio = [
  {id: 1, name: "Talha", age: 26}, 
  {id: 2, name: "Ayub", age: 22}
]

这是我的完整代码，

import './App.css';
import React, {useState} from 'react';

const bio = [
  {id: 1, name: "Talha", age: 26}, 
  {id: 2, name: "Ayub", age: 22}
]

const App = () => {

  const [bioData, setbioData] = useState(bio); 
  const clear_function = () => setbioData([])
  return (
    <div className="App">
      {
      bioData.map((arr) =>
      <>
       <h3 key={arr.id}>Name: {arr.name}, Age: {arr.age}</h3>
      <button onClick={() => clear_function()}>Click me</button>
      </>
      )}
    </div>
  );
}

export default App;

现在，这段代码将整个数组挂钩到 useState。每当我单击“单击我”按钮时，它会将状态设置为空数组并返回空数组作为结果。

但是如果我想删除数组的特定行怎么办？我做了两个按钮，每个按钮一排。我想要做的是，如果我单击第一个按钮，它也会从数组中删除第一行并保留第二个数组。

同样，如果我想更改特定行的特定属性值，我该如何使用 useState 挂钩呢？例如，我想更改第 2 行的名称属性。怎么可能用 useState 做到这一点？

加法的情况相同。如果我制作一个表格并尝试在我的 bio 数组中添加一个新行，我该怎么做？我在谷歌上搜索了它，也找到了一个类似的帖子，但其中给出的答案并不令人满意，也没有奏效，这就是我再次问这个问题的原因。

标签： javascriptarraysreactjsreact-hooksuse-state

解决方案

我不确定我是否完全理解您的问题，但是当您想更改功能组件中的状态时，您不能直接更改状态对象，而是需要创建一个新的所需状态对象，然后设置状态该对象。例如，如果您想向数组添加新行，您将执行以下操作：

setbioData((currBioData) => [...oldBioData, {id: 3, name: "Bla", age: 23}]);

当您想根据当前状态更改状态时，可以选择向setState函数发送一个接受当前状态的回调函数，然后使用扩展运算符向数组添加一个新行。我不打算讨论为什么最好传递一个函数来修改当前状态，但你可以在React 官方文档setState中阅读它

推荐阅读