时间戳

首页 > 解决方案 > 为什么该函数没有在组件中返回数据，尽管它正确显示在控制台上？

javascript - 为什么该函数没有在组件中返回数据，尽管它正确显示在控制台上？

问题描述

我必须显示用户之前添加的书籍，当用户单击按钮但我没有得到结果时会发生这种情况，这是什么问题？

//这里是函数

  displayBooks = () => {

    const { users, books } = this.state
    const user = users.find(user => user.email === currentUser.email)
    const arrayHaveFavBooksId = user.favBooks
    let arrayHaveObjOfuserFavBooks = [];

    for (let book of books) {
      for (let bookId of arrayHaveFavBooksId)
        if (bookId === book.id) {
          arrayHaveObjOfuserFavBooks.push(book)
        }
    }
// 
 console.log(arrayHaveObjOfuserFavBooks);

    const showBooks = arrayHaveObjOfuserFavBooks.map((book, id) => {
      return (
          <figure key={id}>
            <img src={book.photoURL} alt={book.title} />
          </figure>
      )
    })
    return showBooks
  }

这是组件上的渲染

 render() {
    return (
      <section className="profile">
            <button onClick={this.displayBooks}> show my Books</button>
      </section>
    );
  }

// 这里是 imgfor 日志数据在控制台中出现没有问题

标签： javascriptreactjs

解决方案

您将onClick回调与组件的渲染阶段混淆了。您不应该在onClick回调中返回 itens，而是通过调用setState（或其他重新渲染操作，例如 Redux 上的更新）触发重新渲染。

解决这个问题的一种方法是在组件状态上创建一个标志并从onClick回调中更新它。像这样：

class Comp extends React.Component {
  state = {
    books: ...,
    users: ...,
    booksVisible: false,
  }
 
  // displayBooks implementation here

  toggleVisibility = () => {
    const { booksVisible } = this.state
    // Toggles it so you can open and close
    this.setState({ booksVisible: !booksVisible })
  }
  
  render() {
    return (
      <section className="profile">
            <button onClick={this.toggleVisibility}> Show my books</button>
            { booksVisible ? this.displayBooks() : null }
      </section>
    );
  }
}

这样，onClick回调只管理组件的状态，而渲染完全在render函数内部进行。

推荐阅读