React table row delete 不会删除 TextInput

Question

我从数据库中得到一个书单并存储在一个状态变量中书单也有书价字段

const [books, setBooks]=useState([])
setBooks(data)

我正在根据上述书籍数据循环创建一个html

return ( <div>
{books.map((x,i) => ( <tr>
                         <td>x.bookName</td>
                         <td><MyCustomTextInput value={x.price}></MyCustomTextInput></td>
                      <tr></div>);

MyCustomTextInput 如下所示

function MyCustomTextInput(props)
     { return (<div>><TextInput></TextInput> </div>) 
     } exports default MyCustomTextInput

点击后我有一个按钮，它在数组中添加了一个新的书条目，它也在表格中显示了一个新行

当我从数组中删除一个项目时，表格也会删除正确且预期的行

但是假设表中有 5 行。第 4 行的文本输入值为 23.32 美元，第 5 行的文本输入值为 30.00 美元，然后在第 4 行被删除后，删除前第 4 行的价格为 23.32 美元，即使在第 5 行现在是第 4 行和我预计价格为 30.00 美元（删除后第 5 行现在移至第 4 行）

此问题仅与文本输入有关，并且表中的另一个字段簿名称已正确更改

专家有什么建议.....

Answer 1

我认为你应该清楚你的问题。大量的拼写错误使您难以理解您的真正问题。

我现在唯一能猜到的就是它可能和地图功能有关

books.map((x,i) => ( <tr key={x.id}> ... </tr>)

您应该将key 属性添加到tr 元素以告诉react 是新创建的。

我不确定这个。

function MyCustomTextInput(props)
     { return (<div>><MyCustomTextInput></MyCustomTextInput> </div>) 
     } exports default MyCustomTextInput

您在 MyCustomTextInput 组件中渲染 MyCustomTextInput？

Answer 2

当使用列表时，React 需要一个“key”道具，这样当一个孩子时，例如一本书被删除它知道哪本书被删除了

我很难遵循你的代码，但你的书应该在列表中是这样的：

<tr key={book.id}>
    <td>whatever</td>
</tr>

现在当索引 4 处带有 {some id} 键的 tr 被删除时，react 将正确更新列表