传递更新值时状态变量不更新

Question

在我的功能组件内 我有一个名为 inputList 的状态变量，它接受一个对象列表。

const [inputList, setInputList] = useState([{ word: "", meaning: "" }]);

我映射到 inputList 以呈现两个名为 word 和 meaning 的输入字段以及 add 和 remove 按钮。按钮可用于添加或删除多个输入字段。

问题是：每当我删除字段时，这些字段中的文本也应该从 inputList 数据中删除。但 inputList 不会自行更新。

我的渲染 jsx 包含以下代码：

{inputList.map((x, i) => {
                return (
                    <div key={i} className="flex w-full justify-center">
                        <input onChange={e => handleOnChange(e,i)} name="word" placeholder="Word"  type="text" />
                        <input onChange={e => handleOnChange(e,i)} name="meaning" placeholder="Meaning"  type="text" />
                        {
                            inputList.length !== 1 &&
                            <button onClick={(i)=>{handleRemoveClick(i)}} >Remove</button>                            
                        }

                    </div>
                )
            })}

处理函数是：

    const handleAddClick = () => {
        setInputList([...inputList, { word: "", meaning: "" }]);
    }

    const handleOnChange = (e, i) => {
        const { name, value } = e.target;
        const list = [...inputList];
        list[i][name] = value;
        setInputList(list);
    }

    const handleRemoveClick = index => {
        console.log(index);
        const list = [...inputList];
        list.splice(index, 1);
        console.log(list);
        setInputList(list);
        console.log(inputList);
    }

handleRemoveClick() 控制台记录从给定输入字段中删除 c 和 d：

我不明白为什么handleOnChange(e, i)从map函数接收i作为索引，但handleRemoveClick(i)接收一个未知对象，如console.log中显示的那样

Answer 1

@Konrad 明白了——您将用事件替换

i

：

<button onClick={(i)=>{handleRemoveClick(i)}} >Remove</button> 

应该是：

<button onClick={()=>{handleRemoveClick(i)}} >Remove</button> 

或者，为了保持一致性

应该是：

<button onClick={(e)=>{handleRemoveClick(i)}} >Remove</button>