I'm trying to display the list of results taken from the response of wikipedia API. If the response doesn't show any list, it should show a different message. I am trying to do a conditional rendering.

以下是代码:

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

Where is the error? Am I doing the conditional rendering the right way?

谢谢

推荐答案

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

你为什么要设置一个函数?设定<div...就行了-

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

Edit -

为了真正使用函数(但不确定为什么),代码必须有所不同-

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

Edit 2 -

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

Reactjs相关问答推荐

每个都有重复元素的嵌套组件

react应用程序中的字体不适用于.scss扩展名

Inbox Enum类型以React组件状态时出现TypScript错误

有没有办法让两个状态在两次精准渲染中更新?

在Reaction中更新状态时,我将变得未定义

需要特定的数学函数来标准化动画持续时间

Reaction路由-如何在布局路由内呈现&q;/:id&q;路由

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

显示我是否加入聊天应用程序时出现问题

ReactJS on AWS Amplify与EC2上的Spring boot服务之间的混合内容错误

无法读取未定义的属性(阅读 'editQuoteModalShown')reactredux

使用 toast 时挂钩调用无效

如何初始化 redux 全局存储 preloadedState

我正在try 将一组加载程序函数发送到我的路由,它抛出一个错误 Handler is not a funtion in a reactJs application

如何在 nextjs 中单击按钮时动态导入和渲染组件?

使用 Jest/React 测试库时,如何测试由 setInterval 函数创建的 DOM 更改?

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

在 Redux 中更新布尔状态时出错

点击提交后自动添加#

react / firebase 基地.如何在我的项目中保存更新的数据?