对象无效,因为React子反应错误?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对象无效,因为React子反应错误?相关的知识,希望对你有一定的参考价值。
你能告诉我为什么我收到这个错误:
对象作为React子对象无效(找到:具有键{seo_val,text_val}的对象)。如果您要渲染子集合,请使用数组。
我试图点击http
请求并尝试下拉。
import React from "react";
class DropDown extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
const makeDropDown = () => {
console.log(this.data);
return this.props.data.map(x => {
return <option>{x}</option>;
});
};
return (
<div>
<div>
<select>{makeDropDown()}</select>;
</div>
</div>
);
}
}
export default DropDown;
答案
完整的错误消息:
对象作为React子对象无效(找到:具有键{seo_val,text_val}的对象)。
错误很明显,您正在尝试在jsx中呈现包含两个键的对象:
seo_val: "..."
text_val: "..."
像这样写,(渲染你想要的值):
return <option key={x.seo_val}>{x.text_val}</option>;
另一答案
看起来像x
是一个对象。
尝试
import React from "react";
class DropDown extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
return (
<div>
<div>
<select>{
this.props.data.map(x => {
return (<option key={x}>echo</option>);
})
}</select>;
</div>
</div>
);
}
}
export default DropDown;
你会发现它有效。用echo
替换{x}
会抛出你提到的错误。
以上是关于对象无效,因为React子反应错误?的主要内容,如果未能解决你的问题,请参考以下文章
尝试基于 AsyncStorage React-Native 渲染组件时,对象作为反应子级无效
React 错误:对象作为 React 子级无效,如果您打算渲染子级集合,请改用数组
错误:对象作为 React 子对象无效(找到:带有键 low, high 的对象)