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

Question

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

我正在将父组件的 books 数组传递给子组件 component.I 可以从子组件向父组件添加一本书。

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

那么，如何映射两个数组并检查我的条件？

我正在尝试使用以下代码，但这行不通。我知道下面的代码不是正确的方法，但我不知道如何继续

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

    })

因此，父书籍数组中只有几本书已经存在于子书籍数组中。

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

子组件中的所有书籍的初始书架属性为 "None"。

有人可以建议如何进行吗？

编辑

我正在尝试实现下面的代码 function.But 我在使用 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 没有返回处于地图函数不在状态下的书籍数组 executed.What 我做错了吗？

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 returns 一个数组，因此请使用 forEach;

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

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

How to map over 2 arrays simultaneously and update the arrays according to condition in reactjs

javascript

arrays

reactjs