如何避免使用 React.js 中的 useState 挂钩更新我的功能组件的所有实例？

Question

TL;DR 我正在制作一个可重用的Button 功能组件。我的按钮标签的useState() 钩子正在更新每个Button 实例。我怎样才能防止这种情况发生？

我对 React 非常陌生，并且为了学习而构建了一个 Book Finder 应用程序。到目前为止，我的应用程序有一个 BookList 和一个 ReadingList。任一列表中的每个BookDetail 都有一个Button，用于在ReadingList 中添加/删除该书。添加/删除功能有效（呸），但使用useState 更新Button 的标签会更新Button 组件的每个实例，而不仅仅是被点击的那个。

Buttons 在BookList 中的书籍上以标签“添加到阅读列表”开头，但如果我点击其中的任何，它们中的所有都会更新为'从阅读列表中删除'。

我尝试将逻辑移动到 Button 组件或 List 组件中，但我最终破坏了该功能。

App.js

function App() {

const books = useState([])
const [booksToRead, setBooksToRead] = useState([])
const [addRemove, setAddRemove] = useState(true)
const [label, setLabel] = useState('Add to Reading List')

function handleAddBook(book) {
    const newID = book.title_id
    if( (typeof booksToRead.find(x => x.title_id === newID)) == 'undefined' ) {
        setBooksToRead([...booksToRead, book])  
    }
}

function handleRemoveBook(book) {
    console.log(book)
    const array = booksToRead
    const index = array.indexOf(book)
    const newArray = [...array.slice(0, index), ...array.slice(index +1)]
    setBooksToRead(newArray)
}

function addOrRemove(book) {
    if( addRemove ) {
        handleAddBook(book)
        setLabel('Remove from Reading List')
        setAddRemove(false)
    } else {
        handleRemoveBook(book)
        setLabel('Add to Reading List')
        setAddRemove(true)
    }
}

return (
    <main>
        <BookList books={books} handleAddBook={handleAddBook} addOrRemove={addOrRemove} label={label} />
        <ReadingList booksToRead={booksToRead} handleRemoveBook={handleRemoveBook} />
    </main>
  );
}

export default App;

BookList.js

function BookList ({ book, label, handleAddBook, addOrRemove }) {

    return (
        <div className="booklist">
            {BookData.map((book, index) => {

                const onAddBook = () => addOrRemove(book)

                return (
                <div key={index} className="card">
                    <BookDetail key={book.title_id} book={book} />
                    <Button key={index + 'btn'} label={label} onClick={onAddBook} />
                </div>
                )
            })}
        </div>
    )
}

export default BookList

最后是 Button.js

export default function Button({ styleClass, label, onClick }) {

    return (
        <button className='btn' onClick={(event) => onClick(event)}>
            {label}
        </button>
    )
}

codesandbox 中的无样式示例：https://codesandbox.io/s/cool-rgb-fksrp

Answer 1

您能否进行这些更改，如果有任何进展，请告诉我：

1. <Button label={label} onClick={() => addOrRemove(book)} />
2. <button className='btn' onClick={onClick}>

看起来在 button 中，您传递的是 event 而不是 book 作为函数参数

Answer 2

就像现在一样，您声明一个标签并在所有书籍条目上使用相同的标签。这就是为什么它们都显示相同的标签。您需要跟踪每本书的标签，例如将标签作为字段保存在书对象中。

例如：

const books = useState([{ label: 'Add to reading list', addRemove: true }])

然后：

function addOrRemove(book) {
    if( book.addRemove ) {
        handleAddBook(book)
        book.label = 'Remove from Reading List'
        book.addOrRemove = false
    } else {
        handleRemoveBook(book)
        book.label = 'Add to Reading List'
        book.addOrRemove = true
    }
}

这样，每本书都有自己的标签。