如何从ReactJS中的子/细节组件更新和显示父/列表组件

Question

0

我是一个初学者，在react中练习图书馆管理系统。所以我有了名为BookDetails.js、BookList.js的组件。BookDetails包含用于输入标题和说明的表格。在提交表格时，我收到了警告"；警告：列表中的每个子项都应该有一个唯一的"；键"；道具"；。来自书籍详细信息的显示功能。那么，我应该添加什么来显示输入的表单数据呢。这是我的代码：BookDetails.js

import React, { useState } from 'react'import './BookDetails.css'

const [bookTitle, setbookTitle] = useState('');
const [desc, setDesc] = useState('');
const titleChangehandler = (e) => {
setbookTitle(e.target.value);
}
const descriptionChangehandler = (e) => {
setDesc(e.target.value);
}
const submitHandler = (e) => {
e.preventDefault();
props.addBook();
}

return (
<div className='bookdetails'>
<form className='form_bookdetails' onSubmit={submitHandler}>
<div>
<label>Enter Title:</label>
<input type='text' value={bookTitle} onChange={titleChangehandler}></input>
</div>
<div>
<label>Enter Description:</label>
<input type='text' value={desc} onChange={descriptionChangehandler}></input>
</div>
<div>
<button type='submit'>Add Details</button>
</div>

</form>
</div>
)
}

export default BookDetails

BookList.js
import React, { useState } from 'react'
import './BookList.css'
import BookDetails from './BookDetails'
const BookList = () => {
const [bookList, setBookList] = useState([])
const addBook = (book) => {
setBookList([...bookList, book])
}
const Display=()=>{
return (
<ul>
{bookList.map((list) => (
<li key={list}>{list}</li>
))}
</ul>
);
}

return (
<>
<div className="booklist">
<header>BookList</header>
<BookDetails addBook={addBook}/>
<Display/>
</div>
</>
)
}
export default BookList

Answer 1

您需要为每个子项添加一个unique键，以便不同子项之间的反应可能不同。以下是最简单的方法：

const Display=()=>{
return (
<ul>
{bookList.map((list, index) => (
<li key={index}>{list}</li>
))}
</ul>
);
}

请记住，将index用作key不是最佳做法，尤其是当您的列表项目频繁更改时，您应该为该项目选择更具体的密钥，但在这种情况下，可以使用

Answer 2

您忘记使用密钥一个列表项，密钥

const Display=()=>{
return (
<ul>
{bookList.map((list, index) => (
<li key={somethingUnique}>{list}</li>
))}
</ul>
);
}

如果你没有独特的东西，你可以使用这个库uuid

的最佳实践

Answer 3

当您从BookDetails组件调用函数props.addBook()时，首先需要确保将书籍作为参数传递：

const submitHandler = (e) => {
e.preventDefault();
props.addBook({
title: bookTitle,
description: desc
});
}

然后，您还应该为正在渲染的每个li元素使用一个字符串唯一键。如果你知道每本书都需要有一个不同的标题，那么你可以使用一个标题作为唯一密钥，否则我建议你为每本书创建一个唯一的id(你需要将其存储在书对象中)。为了这个练习的目的，我只假设每个标题都是唯一的：

{bookList.map(({title, description}) => (
<li key={title}>{`${title}, ${description}`}</li> // make sure to not render the entire object list because that is not allowed
))}

在这里，您可以找到React的一些文档，这些文档建议使用字符串作为唯一键，而不是数组的索引：https://reactjs.org/docs/lists-and-keys.html#keys