update未捕获并且无法更新输入字段

Question

请找到下面的代码，其中包含名称id和最初使用地图渲染的am

正在将id值替换为UI 中的输入类型

使用更新的输入类型，我试图更新更改的值

更新未捕获并且无法更新输入字段

有什么建议吗？

请参阅下面的片段

import React, { useState } from "react";
const CstmInput = (props) => {
return (
<input
name={props.name}
type="text"
value={props.value}
onChange={(event) => props.onInputChange(event)}
/>
);
};
export default CstmInput;
import React, { useState } from "react";
import CstmInput from "./CstmInput";
const HierarcyTest = () => {
let rowData = [
{ name: "first", id: 10 },
{ name: "second", id: 20 },
];
const [data, setData] = useState(rowData);
const [name, setName] = useState({ fn: "test" });
const onInputChange = (e) => {
console.log("---event---", e.target.value);
setName({ ...name, fn: e.target.value });
};
let updateValue = () => {
let newData = data.map(
(item, index) =>
(item.id = (
<CstmInput name={item.name} value={item.id} onInputChange={(e) => onInputChange(e)} />
))
);
setData([...data, newData]);
};
return (
<div>
<div>Testing</div>
{data.map((val) => (
<h6>
{" "}
{val.name} {val.id}
</h6>
))}
<button onClick={updateValue}> Click </button>
</div>
);
};
export default HierarcyTest;

Answer 1

您的代码不能按预期工作的一些原因：

1.

let updateValue = () => {
let newData = data.map((item, index) => {
if (item.id === 10) {
return [
(item.id = (
<CstmInput
value={item.id}
onInputChange={(e) => onInputChange(e)}
/>
)),
];
}
});
setData([...data, newData]);
};

在map回调内的上述函数中，只有当条件满足时才返回。您是否正在尝试filter数组？如果不是，则在If条件失败时返回一些内容。

你为什么要返回一个数组？

return [
(item.id = (
<CstmInput
value={item.id}
onInputChange={(e) => onInputChange(e)}
/>
)),
];

上面的代码在逻辑上似乎是错误的。

2.

const onInputChange = (e) => {
console.log("---event---", e.target.value);
setName({ ...name, fn: e.target.value });
};

如果你想更新依赖于先前状态的状态，那么你可以这样做：

setName((prevState) => ({ ...prevState, fn: e.target.value }));

但由于您实际上并不依赖于上一个状态的属性，因此您可以使用：

setName({fn: e.target.value });

请注意，由于您的状态只有一个属性，并且您希望更新该单个属性，因此可以完全覆盖该状态，因此不需要分散以前的状态。

更新更改updateValue函数如下：

let updateValue = () => {
setData(prevData => {
return prevData.map(el => {
return { ...el, id: <CstmInput value={el.id} onInputChange={(e) => onInputChange(e)} /> };
})
});
};

我创建了一个stackblitz示例，它实现了你想要做的事情