如何同时映射 2 个数组并根据 reactjs 中的条件更新数组

Question

在 React 中，我将数据从父组件传递到子组件。两个组件都有自己的独立状态，其中包含一系列书籍。

我将父组件的书籍数组传递给子组件。我可以将子组件中的一本书添加到父组件。

在子组件中，我需要执行一个条件：如果子组件的书籍数组中有一个元素已经存在于父组件的书籍数组中，那么我需要更新书籍数组的一个属性子组件。

那么，我如何映射这两个数组并检查我的状况？

我正在尝试使用以下代码，但这不起作用。我知道下面的代码不是正确的方法，但我无法弄清楚如何继续

let parent_books = this.props.books;
  this.state.child_books.map((book,index) => {
      if(book === parent_books[index])
          book.shelf = parent_books[index].shelf

    }) 

因此，父书籍数组将有少量书籍已经存在于子书籍数组中。

所以我想检查父书籍数组中是否有一本书存在于子书籍数组中，然后我想将子书籍数组中的书架属性设置为父书籍数组中书籍的任何属性。

子组件中的所有书籍的初始书架属性为“无”。

任何人都可以建议如何进行此操作吗？

编辑

我正在尝试在下面的函数中实现代码。但是我在使用 setState 时遇到了一些问题。代码：

updateSearch = (searchString) => {
    let parent_books = this.props.books;
    this.setState({search: searchString.trim()})
    let searchResults = BooksAPI.search(this.state.search,1).then((book_search) => {
      if (book_search != undefined) {
        console.log(book_search)
          book_search.map((book) => book.shelf = 'none')
          this.setState({ books : book_search })
          console.log(this.state.books) //Gives the array of state
        }
    })

    console.log(this.state.books) //Gives an empty array
    this.state.books.map((book) => {
      const parent = parent_books.find(parent => parent === book );
      if(parent) {
        console.log(book.title);
        book.shelf = parent.shelf
      }
    })
  }

第二个console.log 没有返回处于其后未执行地图功能的状态的书籍数组。我做错了什么？

Answer 1

不确定您的用例，但类似这样的方法可能有效：

componentWillReceiveProps(nextProps) {
    const {parent_books} = this.props;
    const {child_books} = this.state;
    if (parent_books !== nextProps.parent_books) {
      const books = child_books.map((child) => {
        const parent = parent_books.find(parent => parent.id === child.id);
        if (parent) {
          child.shelf = parent.shelf
        }
        return child;
      })
      this.setState({child_books: books});
    }
}

注意parent_books 应该是不可变的，这样parent_books !== nextProps.parent_books 才能工作。您可能不想使用 index 作为查找（我在示例中使用虚构的 id），因为父书和子书的顺序必须保持同步。

Answer 2

由于要更新组件的状态，所以需要使用setState。此外，map 返回一个数组，因此请改用forEach;

componentDidMount(){
  this.state.child_books.forEach((book, i) => {
    if(book === parent_books[i]){
      this.setState({child_books: {shelf: [parent_books[i].shelf]}});
    }
  });
}