Несколько причин, по которым ваш код не работает должным образом:
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 });
Обратите внимание, что с ваше состояние имеет только одно свойство, и вы хотите обновить это единственное свойство, которое вы можете полностью перезаписать, вам не нужно распространять предыдущее состояние.
update измените функцию updateValue как следующее:
let updateValue = () => {
setData(prevData => {
return prevData.map(el => {
return { ...el, id: <CstmInput value={el.id} onInputChange={(e) => onInputChange(e)} /> };
})
});
};
A Пример стекаблита Я создал, который реализует то, что вы пытаетесь сделать.