Question

你可以告诉我为什么我会收到这个错误：

对象无效作为React子对象（找到：带键的对象） {seo_val，text_val}）。如果你想渲染一个孩子的集合，改为使用数组。

我正在尝试点击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;请求并尝试下拉。

$bundles = array(
    new \FOS\UserBundle\FOSUserBundle(),
);

Sandbox.

Answer 1

完整的错误消息：

对象无效作为React子对象（找到：带键的对象） {seo_val，text_val}）。

错误很明显，您试图在jsx中渲染包含两个键的对象：

seo_val: "..."
text_val: "..."

像这样写，（渲染你想要的值）：

return <option key={x.seo_val}>{x.text_val}</option>;

<强> Working sandbox.

Answer 2

看起来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子反应错误？

2 个答案: