React本地状态管理问题：如何将新Book对象合并到State

我来帮你实现这个updateShelf方法，核心就是先判断书籍是否存在，再做新增或更新操作，具体代码和思路如下：

首先，完整的updateShelf方法可以这么写：

class BooksApp extends React.Component { 
  state = { books: [] }; 

  componentDidMount() { 
    console.log("MOUNTING"); 
    BooksAPI.getAll().then(books => { 
      this.setState({ books }); 
    }); 
  } 

  updateShelf = (book, shelf) => {
    // 先同步后端数据，确保前后端状态一致
    BooksAPI.update(book, shelf).then(() => {
      // 处理本地状态更新
      this.setState(prevState => {
        // 通过id判断书籍是否已存在于当前状态
        const bookExists = prevState.books.some(existingBook => existingBook.id === book.id);
        
        if (!bookExists) {
          // 书籍不存在时，合并新书籍（记得给新书籍加上shelf属性）
          return {
            books: [...prevState.books, { ...book, shelf }]
          };
        } else {
          // 书籍存在时，更新对应书籍的shelf值
          return {
            books: prevState.books.map(existingBook => 
              existingBook.id === book.id 
                ? { ...existingBook, shelf } 
                : existingBook
            )
          };
        }
      });
    });
  }

  // 其他组件代码...
}

关键逻辑拆解： #

• 判断书籍存在性：用some方法遍历现有数组，通过唯一标识id判断（比其他字段更可靠，避免重名等问题）。
• 新增书籍：用扩展运算符...复制原数组，再添加整合了shelf属性的新书籍对象，完全遵循React不可直接修改原状态的规范。
• 更新现有书籍：用map方法生成新数组，仅替换目标书籍的shelf属性，其余书籍保持原样，保证状态更新的精准性。
• 同步后端：先调用BooksAPI.update更新后端数据，再在回调里更新本地状态，确保前后端数据完全同步。

这样就能完美实现你要的“不存在就合并，存在就更新书架”的需求啦～

内容的提问来源于stack exchange，提问作者Robinj