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

Question

我有一个数组

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挂钩。每当我点击按钮& click me"，它设置状态为空数组，并返回空数组作为结果。

但是如果我想删除数组中的某一行呢?我制作了两个按钮，每个按钮对应一行。我想做的是，如果我点击第一个按钮，它会从数组中删除第一行并保留第二个数组。

同样，如果我想改变特定行的特定属性值，我如何使用useState钩子做到这一点?例如，我想更改名称属性第二行． 如何使用useState做到这一点呢?

对于加法也是一样。如果我做一个表单，并尝试添加一个新的行到我的生物阵列，我该怎么做?我在谷歌上搜索了一下，发现了一个类似的帖子，但它给出的答案并不令人满意，也没有工作，这就是为什么我再问这个问题。

Answer 1

如果我理解对了问题，我认为你可以将更新后的对象传递给set state，这样就可以了。

要更改数组中的特定对象，请执行如下操作:

// Update bio data with id = 2
setbioData(prevValue => 
[...prevValue].map(el => 
el.id === 2 ? ({...el, name:'new name'}) : el)
)

另外，您将key设置在错误的位置

完整的重构代码:

const bio = [
{id: 1, name: "Talha", age: 26}, 
{id: 2, name: "Ayub", age: 22}
]
const App = () => {
const [bioData, setbioData] = useState(bio); 
const clear_function = (id) => {

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

Answer 2

用react useState向数组中添加一行就像下面这样简单:

function addRow(objToAdd){
//get old data and add new row
let newBioData = bioData.push(objToAdd)
setBioData(newBioData)
}

要删除特定的行，您需要在bioData数组中找到对象，删除它并设置新的bioData，如下所示:

function removeRow(rowId){
//Filter the array by returning every object with a different Id than the one you want to remove
let newBioData = bioData.filter(function (value, index, arr){ return value.id != rowId })
setBioData(newBioData)
}

要更新状态，可以使用扩展操作符，如下所示:

function updateRow(rowId, data){
//Iterate list and update certain row
bioData.filter(function (value, index, arr){
//Row to update
if(value.id == rowId){
return {name: data.name, age: data.age}
}else{
//Nothing to update, return current item (spread all values)
return {...value}
}
})
setBioData ([])
}

Answer 3

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

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

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

中阅读它。

Answer 4

看起来这里有3个问题。我将尽力帮助你。

1. "如果我想删除数组中的特定行该怎么办?"一种方法是过滤当前数组并用新数组更新状态。在您的示例中:onClick={()=>setbioData(arr.filter(row=>row.id !== arr.id))}

2. "如果我想更改特定行的特定属性值，如何使用useState钩子?"您需要创建一个包含正确信息的新数组，并将该数组保存为state。在您的示例中:[... bioData, {id:/row_id/,name:/new name/,age:/new age/}]

3. "如果我创建一个表单，并尝试添加一个新行到我的生物数组，我该怎么做"在这种情况下，您将推入一个新对象到数组中。在您的示例中:

setbioData(previousData=>previousData.push({id:previousData.length+1,name:/new name/,age:/new age/})

我希望这对你有帮助，祝你好运

Answer 5

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 = (i) => {
let temp = bioData.slice()
temp = temp.splice(i, 1)
setbioData(temp)
}
return (
<div className="App">
{
bioData.map((arr, i) =>
<>
<h3 key={arr.id}>Name: {arr.name}, Age: {arr.age}</h3>
<button onClick={() => clear_function(i)}>remove row</button>
</>
)}
</div>
);
}
export default App;

就像你需要更新一个特定的属性一样只需更新temp数组中的元素然后执行setBioData(temp)

同样，如果你想添加另一行，请执行temp.push({id: 1, name: "Talha"， age: 26})和setBioData(temp)