Предупреждение. Функции недействительны в качестве дочернего элемента React, используя условный рендеринг

Я пытаюсь отобразить список результатов, полученных из ответа 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 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 return a Component instead of <Component/> from render. Or maybe you meant to call this function rather than return it.

Где ошибка? Правильно ли я выполняю условное рендеринг?

Спасибо

Ответ 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 не обязательно должны быть конструкторы/классы, они также могут быть простой функцией, которая получает реквизит в качестве параметра и возвращает JSX. Я думаю, что этот тип компонентов немного ограничен, но он работает.

Ответ 2

вы устанавливаете resultList для функции, когда objectList === "". либо вернуть a <div> напрямую, либо использовать эту функцию как IIFE:

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