如何在React中跟踪映射数组的状态?

Question

所以，本质上我想在对原始数组进行更改或添加时跟踪React组件中的状态值。听起来很模糊，但让我用一个例子来解释

我有一个组件为这个数据格式呈现一个数组

[
{
Name: '',
Age: '',
Gender: ''
}
]

组件类似于

import React, { useState } from 'react';
import jsonData from './json-data.js'
export default function Search() {
const [name, setname] = useState('')
const [age, setage] = useState('')
const [gender, setgender] = useState('')
const [data, setData] = useState({jsonData})
const addsection = (event) => {
event.preventDefault()
let dataStr = {
name: '',
address: '',
gender: ''
}
/** creates another section with empty data fields*/
setData([...data, dataStr])
}
const save = () => {
POST request goes here
}
return (
<>
<button onClick={addsection}> Add another section </button>
{data.map((item, index) => (
<div key={index}>
<input value={item.name} onChange={event => setname(event.target.value)}/> 
<input value={item.age} onChange={event => setage(event.target.value)}/> 
<input value={item.gender}  onChange={event => setgender(event.target.value)}/> 
</div>
))}
<button onClik={save}> Save</button>
</>
)
}

现在主要的问题是假设我创建了两个空字段，并对它们都进行了处理。有时是在第一个物体的输入上，有时是在第二个物体上。我怎么跟踪状态呢?

Answer 1

与其为相同的数据使用重复的状态，如姓名，年龄&性别，直接在数据状态下更新。除了数据，不需要额外的状态。

Answer 2

我认为最简单的方法是创建一个父组件，如搜索()，它有一个添加按钮。例如:

import React, { useState } from 'react';
import Search from 'path-to-Search-component';
export default function Searches() {
const [searches, setSearches] = useState([]);
const [searchesNum, setSearchesNum] = useState(0);
const addsection = (event) => {
event.preventDefault();

let search = {
id: searchesNum, /** using searchesNum as an id to be assigned to new Search compmonents **/
}
setSearchesNum(searchesNum + 1);
/** adding new Search component to searches array **/
setSearches([...searches, search]);
}

const deleteSection = (search_id) => {

const index = searches.findIndex(
(search) => search.id === search_id
);
let newSearches = [...searches];
if (index >= 0) {
newSearches.splice(index, 1);
setSearches(newSearches);
} else {
console.warn(
`Cant remove Search (id: ${search_id}) as its not in Searches!`
);
}
}
return (
<>
<button onClick={addsection}> Add another section </button>
{searches.map((search) => (
<Search key={search.id} id={search.id} deleteSection={deleteSection}></Search>
))}
</>
)
}

这是一个包含多个子组件的父组件，在本例中是Search。我使用了两个变量'searches'(搜索对象数组)和'searchesNum' (id)。单击此处的add按钮将简单地创建一个具有单个名为"id"的属性的搜索对象(这在下面的map函数中用作键)。我添加的另一个新东西是deleteSection()函数。该函数作为prop向下传递给所有Search组件。下面是它的用法:

import React, { useState } from 'react';
import jsonData from './json-data.js'
export default function Search({ id, deleteSection }) {
const [name, setname] = useState('')
const [age, setage] = useState('')
const [gender, setgender] = useState('')

const save = () => {
/** POST request goes here **/
}
return (
<>
<div>
<input value={item.name} onChange={event => setname(event.target.value)}/> 
<input value={item.age} onChange={event => setage(event.target.value)}/> 
<input value={item.gender}  onChange={event => setgender(event.target.value)}/> 
</div>

<button onClick={() => deleteSection(id)}> Delete Section </button>
<button onClik={save}> Save</button>
</>
)
}

单击时，将调用父组件的deleteesection()，并使用Search组件的id来标识需要从searches组件的搜索数组中删除的项。

还有一件事:我不是100%确定，但是按钮只在放置在表单标记中时刷新页面，所以在您的示例中不需要e.p preventdefault()。

希望对大家有帮助。