对象作为React子对象无效(已找到:键为｛arr｝的对象).如果要渲染子对象的集合，请改用数组

Question

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错误

Answer 1

您返回的是Object而不是Array(搜索函数中的最后一条语句)

只需使用

return arr;

代替

return { arr };

您的错误也解释了这一点：对象作为React子对象无效(已找到：具有键｛arr｝的对象)

.map仅适用于阵列