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>。现在你什么都没有回来。

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

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>
      );
    });
  });
}

组件不会渲染从渲染函数调用的函数

1 个答案: