组件未渲染React.js中的组件列表

Question

所以我正在使用react构建应用程序，而我的列表未显示在render（）上。 我有我的父级组件，并且有一个组件列表，它们来自SearchResult。 这是我的代码：

class CreateBookGroup extends Component {
  constructor(props) {
    super(props);

    this.state = {
      titleToSearch: "",
      searchResults: []
    }

  }

  new Promise((resolve, reject) => {
      let searchBook = this.searchFormatter();
      console.log("Search book is " + searchBook);
      searchForBook(searchBook, resolve, reject);
    }).then((res, err) => {
      if (err) {
        return console.error(err);
      }
      console.log(res.body);

      for (let i = 0; i < res.body.items.length; i++) {

        let smallThumbnail = null;

        if (res.body.items[i].volumeInfo.imageLinks) {
          smallThumbnail = res.body.items[i].volumeInfo.imageLinks.smallThumbnail;
        }

        let resultToAdd = {
          bookCover: smallThumbnail,
          bookTitle: res.body.items[i].volumeInfo.title,
          bookAuthors: res.body.items[i].volumeInfo.authors,
          bookDescription: res.body.items[i].volumeInfo.description
        }

        this.state.searchResults.push(resultToAdd);
      }



    });
  }

  render() {
    const searchBookRes = this.state.searchResults.map((result) => {
      <SearchResult
        bookCover={result.bookCover}
        bookTitle={result.bookTitle}
        authorName={result.bookAuthors}
        bookDescription={result.bookDescription}
        />
    });

    console.log(searchBookRes.length);

    return (
      <div className="GlobalAlignment">
        <Header/>
        <Container>
          <Row>
            <Col lg={12}>

              <h1>Create a group</h1>
              <div className="bookGroupDiv">

                <input
                  type="text"
                  className="searchText"
                  required
                  name="bookSearch"
                  onChange={this.handleChange.bind(this, "titleToSearch")}
                  placeholder="Search for a title"/>

                <button className="btnStandard searchBtn" onClick={this.searchGoogleBookApi.bind(this)}>Search</button>

              </div>

              {searchBookRes}
  ..................................

我什至尝试预设状态，以便页面最初打开时看起来像这样：

constructor(props) {
    super(props);

    this.state = {
      titleToSearch: "",
      searchResults: [{bookTitle: "Sample", bookCover: "Cover", bookAuthors: "Author", bookDescription: "This is the description"}]
    }

  }

但是， {searchBookRes}仍然不显示我的任何列表项，即使它们在我将其登录到控制台时也出现了。

另外，我已经手动将测试值输入到我的子组件中，并像这样直接将其放置到组件中（这很好地传递了道具）：

return (
      <div className="GlobalAlignment">
        <Header/>
        <Container>
          <Row>
            <Col lg={12}>

              <h1>Create a group</h1>
              <div className="bookGroupDiv">

                <input
                  type="text"
                  className="searchText"
                  required
                  name="bookSearch"
                  onChange={this.handleChange.bind(this, "titleToSearch")}
                  placeholder="Search for a title"/>

                <button className="btnStandard searchBtn" onClick={this.searchGoogleBookApi.bind(this)}>Search</button>

              </div>

              <SearchResult
                 bookCover={'Test cover'}
                 bookTitle={'test title'}
                 authorName={'test author'}
                 bookDescription={'test description'}
    />

因此，由于这可以很好地传递道具并显示组件，所以我知道SearchResult组件没有问题。 有人看到我在做什么错吗？ 经过很长一段时间后，我会做出反应，无法弄清楚为什么会发生此问题。 感谢您的帮助。

Answer 1

您不会在map体内返回任何内容，请像这样编写：

const searchBookRes = this.state.searchResults.map((result) => {
      return <SearchResult
                 bookCover={result.bookCover}
                 bookTitle={result.bookTitle}
                 authorName={result.bookAuthors}
                 bookDescription={result.bookDescription}
             />
});

永远不要直接改变状态值，因此，代替this.state.searchResults.push(resultToAdd) ，首先创建一个局部变量进行更改，然后使用setState更新state值，如下所示：

let values = this.state.searchResults.slice();
for (let i = 0; i < res.body.items.length; i++) {
    let smallThumbnail = null;

    if (res.body.items[i].volumeInfo.imageLinks) {
        smallThumbnail = res.body.items[i].volumeInfo.imageLinks.smallThumbnail;
    }

    let resultToAdd = {
        bookCover: smallThumbnail,
        bookTitle: res.body.items[i].volumeInfo.title,
        bookAuthors: res.body.items[i].volumeInfo.authors,
        bookDescription: res.body.items[i].volumeInfo.description
    }

    values.push(resultToAdd);;
}

this.setState({searchResults: values});