警告：函数作为 React 子级无效，使用条件渲染答案

【问题标题】：Warning: Functions are not valid as a React child, using a conditional rendering警告：函数作为 React 子级无效，使用条件渲染
【发布时间】：2018-01-21 20:51:30
【问题描述】：

我正在尝试显示从 wikipedia API 的响应中获取的结果列表。如果响应未显示任何列表，则应显示不同的消息。我正在尝试进行条件渲染。

代码如下：

getData(e) {
        e.preventDefault();
        var search = e.target.search.value;
        var wikipediaEndPoint = "https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&generator=search&gsrnamespace=0&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+search;
        var wikipediaUrl = "https://en.wikipedia.org/?curid=";

        fetch(wikipediaEndPoint)
        .then(data => {
            return data.json();
        }).then(data => {
            var objectList = (data.hasOwnProperty("query")) ? data.query.pages : "";
            let resultList;

            if(objectList !== ""){
                resultList = Object.keys(objectList).map(function(key, index) {
                    return (
                        <div className="item" key={objectList[key].pageid}>
                            <a href={wikipediaUrl+objectList[key].pageid}>
                                <h1>{objectList[key].title}</h1>
                                <p>{objectList[key].extract}</p>
                            </a>
                        </div>
                    )
                });
            } else {
                resultList = (function() {
                    return (
                        <div className="item" key={1}>
                            <p>No results!</p>
                        </div>
                    )
                });
            }

            this.setState({search: resultList});
        })
    }

结果显示在这里：<div className="items">{this.state.search}</div>

当搜索字段关键字找到一些结果时，它可以正常工作，但是，在相反的情况下，控制台会返回错误（或警告）：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

错误在哪里？我是否以正确的方式进行条件渲染？

谢谢

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

            resultList = (function() {
                return (
                    <div className="item" key={1}>
                        <p>No results!</p>
                    </div>
                )
            });

你为什么要设置一个函数？只需设置<div... -

            resultList = (
                    <div className="item">
                        <p>No results!</p>
                    </div>
                )

编辑 -

为了真正使用函数（虽然不知道为什么），代码必须有点不同 -

            const Foo = (function() {
                return (
                    <div className="item" key={1}>
                        <p>No results!</p>
                    </div>
                )
            });
            resultList = (<Foo />)

编辑 2 -

上面的编辑是有效的，因为 React 组件不必是构造函数/类，它们也可以是一个简单的函数，获取 props 作为参数并返回 JSX。我认为这种类型的组件有点受限，但它确实有效。

【讨论】：

【解决方案2】：

当objectList === "" 时，您将resultList 设置为一个函数。要么直接返回<div>，要么将该函数用作IIFE：

resultList = (function() {
  return (
    <div className="item" key={1}>
      <p>No results!</p>
    </div>
  )
})(); // note the parens here, which call the function

【讨论】：