React中修改语言数组元素值时如何保留原有added键？

问题核心是修改元素时没区分原有类型，直接把对象替换成了字符串，导致added键丢失。按以下方式修改代码即可解决：

1. 修复子组件的修改逻辑 #

更新child.js里的handleItemChanged函数，判断元素类型后再做对应更新：

export default function child({language, setLanguage}) {
    const handleAddClick = () => {
        setLanguage([...language, ""]);
    };

    const handleItemChanged = (event, index) => {
        const value = event.target.value;
        const list = [...language];
        const targetItem = list[index];

        // 区分对象类型和字符串类型的元素
        if (typeof targetItem === 'object' && targetItem !== null && 'added' in targetItem) {
            // 保留原有对象结构，只更新added的值
            list[index] = { ...targetItem, added: value };
        } else {
            // 字符串类型直接替换
            list[index] = value;
        }

        setLanguage(list);
    };

    // 记得返回组件内容，此处省略原有渲染代码
    return <div>{/* 你的组件内容 */}</div>;
}

2. 修正父组件的语法错误 #

父组件useEffect里存在括号不匹配问题，同时建议一次性生成数组再更新状态，避免多次调用setLanguage：

const [language, setLanguage] = useState([])

useEffect(() => {
    axios.get('api').then((response) => {
        // 批量生成带added键的对象数组
        const fetchedLanguages = response.data.user.map(user => ({ added: user.language }));
        // 合并原有数组和新获取的数组
        setLanguage(prev => [...prev, ...fetchedLanguages]);
    });
}, []);

修改后，编辑带added键的语言时会保留原有的对象结构，只更新对应的值，最终数组结构和你期望的一致：

language: [
  { added: "Englishhh" },
  "Italian"
]

内容的提问来源于stack exchange，提问作者john_1