React defaultValue 导致过滤功能的行为与预期不同答案

【问题标题】：React defaultValue is causing the filtering function act different than expectedReact defaultValue 导致过滤功能的行为与预期不同
【发布时间】：2021-09-25 05:32:57
【问题描述】：

我有一个可编辑输入的列表，但是当我过滤掉 useState 数组中的一项时，它仅在我使用不可编辑的 value 属性而不是defaultValue 属性，这会导致数组的最后一项被移除（不是被点击的那一项）。

有没有办法在保持输入可编辑的同时删除右边？

这是一个 Fiddle 示例： https://jsfiddle.net/MatanCL/25hLyj6a/1

还有我的代码：

function App () {
  let [myAray1, setMyArray1] = React.useState(['cat', 'dog', 'fish']);
  let [myAray2, setMyArray2] = React.useState(['cat', 'dog', 'fish']);
  return (
    <div>

        Working, but input is uneditable:

        {myAray1.map(animal => <div>
            <input value={animal}/>
            <button onClick={() => {
                const me = animal;
                setMyArray1(myAray = myAray1.filter(animal => animal !== me));
            }}>
                remove
            </button>
        </div>)}

        <br/>

        Removes the wrong one:

        {myAray2.map(animal => <div>
            <input defaultValue={animal}/>
            <button onClick={() => {
                const me = animal;
                setMyArray2(myAray2 = myAray2.filter(animal => animal !== me));
            }}>
                remove
            </button>
        </div>)}
    </div>
  )
}

谢谢大家！

【问题讨论】：

标签： arrays reactjs state jsx use-state

【解决方案1】：

您应该将key 添加到您的输入中。喜欢：

{myAray2.map(animal =>
   <div>
     <input defaultValue={animal} key={animal} />
     ...
   </div>)
}

这样做的原因是明确地告诉 React 的键。更多信息请阅读the official document。

【讨论】：

【解决方案2】：

<input> 不可编辑，因为设置 value 属性使其成为受控组件

您需要将onChange 事件添加到输入以使其可编辑。

为确保您在使用过滤器时没有删除错误的元素，请使用“Key”过滤正确的项目。

删除错误的：

       {myAray2.map(animal => <div>
            <input value={animal} key={animal} onChange={handleOnChange}/>
            <button onClick={() => {
                const me = animal;
                setMyArray2(myAray = myAray2.filter(animal => animal !== me));
            }}>
                remove
            </button>
            <div />)}

【讨论】：