javascript - 在 Reactjs 中，如何让一个 prop 函数做单独的任务并根据需要的条件返回它们的值

Question

我的父组件中有一个函数作为 prop 发送给子组件。在我的一个子组件中，我希望相同的函数(作为 prop 从父组件发送)运行两次.第一个将使用一些参数运行并返回该特定子组件的值。第二个将传递相同的函数(来自父组件，而不是在该组件中执行的函数)作为一个单独的组件再次 Prop 。所以我的功能是:

//Function defined in the parent component and sent as props to the child components
  handleShelfChange = (bookOnChange, newSehlf) => {
     !this.isTheBookNew(bookOnChange) && this.setState(state => {
     let newBooks = state.books.map(book =>
       { if (bookOnChange.id === book.id)
         { book.shelf = newSehlf; }
         return book;
       });
         return {
            books: newBooks
           };
          }
        );
        BooksAPI.update(bookOnChange, newSehlf);
        };

我将此函数发送到子组件之一，如下所示:

<BookSearch
  books={this.state.books}
  handleShelfChange={this.handleShelfChange}/>

现在，在我的 BookSearch 组件中，我需要执行 2 个操作:

1) 使用 handleShelfChange() 方法并从 BookSearch 组件返回值。

2) 将 handleShelfChange() 方法作为 props 传递给另一个组件，它将再次使用相同的方法并返回一些值。

所以，我在第一点中遇到了一些问题，我使用该函数作为 this.setState 的回调

  this.setState({ books : book_search }, this.check()); // callback function to this.setState

回调函数如下:

check() {
    let parent_books = this.props.books;
    let shelf;
    console.log(this.state.books)
    const book_result = this.state.books.map((book) => {
      const parent = parent_books.find(parent => parent.title === book.title );
       if(parent) {
        console.log(parent);
        book.shelf = parent.shelf;
        let shelfChange = this.props.handleShelfChange(book,book.shelf) //Call to the 
                                                  //function sent as props from the parent component
            shelf = shelfChange
              }

            console.log(shelf)   // undefined

            return [book,shelf];
        })
        //console.log(book_result);
        this.setState({books: book_result})
        console.log(this.state.books)
      }

所以，我需要在这里为所有满足 if 条件的书运行 handleShelfChange() 函数，并从检查方法(回调方法)返回它。所以，我尝试在 if 条件之外声明一个变量，并将函数的输出分配给该变量(在 if 条件之外声明)。我还需要从满足条件的 map 函数返回每本书。所以，我有使用数组返回这两个值。但正如我在评论中提到的，console.log(shelf) 返回一个空数组。它显示未定义。从回调函数中获取两个值的正确方法是什么？谁能给我建议一个解决方案？

Answer 1

您的问题出现是因为您错误地使用了 setState 回调语法。 setState 的第二个参数是一个回调函数，你只是在执行函数

你需要这样写

this.setState({ books : book_search }, this.check);

此外 console.log() 在 setState 之后不会显示更新的状态值，您应该将其写在回调中

this.setState({books: book_result}, () => {console.log(this.state.books)})

还要确保您从 handleSelfChange 函数返回适当的值