javascript - 组件不渲染从渲染函数调用的函数

Question

我一直在试图找出为什么 renderFilteredList 不渲染这些列表项(它们都包含子字符串 this.props.searchedWord 并且控制台日志为 true，并且 renderFilteredList 是从原始渲染函数调用的)。

{<li key={singleObject.body} className="list-group-item">{singleObject.body}</li>} 
{<li key={singleObject.name} className="list-group-item">{singleObject.name}</li>}

我不明白为什么，有人可以告诉我我的代码有什么问题吗？

renderFilteredList(){
    console.log('the data to fetch is: ', this.props.dataFetched, 'and the searchedWord is: ', this.props.searchedWord);
    return this.props.dataFetched.map(objects=>{
            return objects.map(singleObject=>{
                console.log(singleObject.body.includes(this.props.searchedWord), singleObject.name.includes(this.props.searchedWord));
            <div>
                {<li key={singleObject.body} className="list-group-item">{singleObject.body}</li>}
                {<li key={singleObject.name} className="list-group-item">{singleObject.name}</li>}
                <hr/>
            </div>
             })
    })

Answer 1

您必须返回<div>在 map 功能内。现在您什么也没有返回。

我还假设您在渲染方法的返回中调用此方法。如果您只是简单地调用它但从渲染中没有返回任何内容，那么您仍然不会在显示中获得任何内容。

renderFilteredList(){
  console.log('the data to fetch is: ', this.props.dataFetched, 'and the searchedWord is: ', this.props.searchedWord);
  return this.props.dataFetched.map(objects => {
    return objects.map(singleObject => {
      console.log(singleObject.body.includes(this.props.searchedWord), singleObject.name.includes(this.props.searchedWord));
      return (
        <div>
          {<li key={singleObject.body} className="list-group-item">{singleObject.body}</li>}
          {<li key={singleObject.name} className="list-group-item">{singleObject.name}</li>}
          <hr/>
        </div>
      );
    });
  });
}