组件没有渲染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});