对象作为 React 子对象无效（找到：带有键 {arr} 的对象）。如果您打算渲染一组孩子，请改用数组答案

【问题标题】：Objects are not valid as a React child (found: object with keys {arr}). If you meant to render a collection of children, use an array instead对象作为 React 子对象无效（找到：带有键 {arr} 的对象）。如果您打算渲染一组孩子，请改用数组
【发布时间】：2021-04-19 18:19:14
【问题描述】：

searchf.jsx

import emojipedia from "./emojipedia";

function Search(props) {
    var arr = [];
    emojipedia.forEach((element) => {
        var flag = 0;
        element.keywords.forEach((key) => {
            if (key.toLowerCase() === props.toLowerCase()) {
                flag = 1;
            }
        });
        if (flag === 1) {
            arr.push(element);
        }
    });
    console.log(arr, typeof arr);
    return { arr };
}
export default Search;

App.js

var arr = [];
{ arr.map((obj) => {
           <button onClick={() => {
                            console.log(obj.emoji);
                            setEmo(obj.emoji);
                            document.getElementsByClassName("cls")[0].style.display =
                            "block";
                        }}
                        className="emoji"
                        >
                        {obj.emoji}
                        </button>;
                    })}

Search 是 searchf.jsx 中的一个函数，用于从具有传递参数作为关键字的数据中搜索所有表情符号。并返回对象数组。但我无法通过数组映射 app.js 中的 arr.map 出错

【问题讨论】：

emojipedia 里有什么？
App.js 似乎不完整。此外，您没有在映射函数中返回任何内容。
你应该返回arr.map中的按钮。

标签： javascript arrays reactjs

【解决方案1】：

您返回的是 Object 而不是 Array（搜索功能中的最后一条语句）

随便用

return arr;

代替

return { arr };

您的错误也解释了它： 对象作为 React 子对象无效（找到：带有键 {arr} 的对象）

.map 仅适用于数组

【讨论】：