如何在 react 中更新状态条目并在更新前在输入字段中显示其内容？

Question

我正在创建一个购物车表单，可用于添加/更新/删除用户信息。我使用react-hook-form进行表单提交和验证。初始状态是空数组。当用户被添加时，对象被附加到状态数组中，如-

state = [
{ name: 'abc', age: '23' },
{ name: 'katy', age: '12' },
];

如果一个div行有一个编辑按钮，它显示在一个现有的输入框中，当我点击更新(另一个按钮)，它更新相应的值，如何更新状态中的值。

注意- name可以相同，因此不能使用state.find()。

Answer 1

一种方法

const UpdateComponent = ({ id, user, setState }) => {
const [userData, setUserData] = React.useState({
id: 0,
name: "",
age: 0
});
React.useEffect(() => {
setUserData({ id: id, name: user.name, age: user.age });
}, [user, id]);
const onChange = (e) => {
setUserData((currentData) => ({
...currentData,
[e.target.name]: e.target.value
}));
};
const onSubmit = () => {
setState((currentState) =>
currentState.map((u) => (u.id === id ? userData : u))
);
};
return (
<>
<input
onChange={onChange}
name="name"
value={userData.name}
placeholder="Name"
/>
<input
onChange={onChange}
name="age"
value={userData.age}
placeholder="Age"
/>
<button onClick={onSubmit} type="button">
Update
</button>
</>
);
};
const List = () => {
const [state, setState] = React.useState([]);
React.useEffect(() => {
setState(
[
{ name: "abc", age: "23" },
{ name: "katy", age: "12" }
].map((u, i) => ({ ...u, id: i }))
);
}, []);
React.useEffect(() => {
// debug
console.log(state);
}, [state]);
return (
<div>
{state.map((user) => (
<UpdateComponent
key={user.id}
id={user.id}
user={user}
setState={setState}
/>
))}
</div>
);
};

看看https://codesandbox.io/s/fragrant-surf-p5cxh?file=/src/App.js

您可以使用UUID包来生成id:

React.useEffect(() => {
// Generates IDs when loading the data as example
// but ideally IDs are created on user creation
setState(
[
{ name: "abc", age: "23" },
{ name: "katy", age: "12" }
].map((u) => ({ ...u, id: uuidv4() }))
);
}, []);

沙箱:https://codesandbox.io/s/unruffled-hypatia-tjzcx

但这与最初使用地图索引id(在组件挂载上)的方法并没有太大不同，这并不理想，因为我们在组件挂载时生成id，但至少它们不会在每次渲染时不断变化

我的初始状态是空数组。当添加user时，对象被附加到状态数组中，如

对于您的情况，您可以只使用一个ID，每次添加用户时都增加，或者在添加uid时使用它，因此您的数据已经带有ID