javascript-对象无效,作为React子反应错误？

您能否告诉我为什么会出现此错误：

Objects are not valid as a React child (found: object with keys
{seo_val, text_val}). If you meant to render a collection of children,
use an array instead.

我试图按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;

Sandbox.

解决方法:

完整的错误消息：

Objects are not valid as a React child (found: object with keys
{seo_val, text_val}).

错误非常清楚,您尝试在jsx中渲染包含两个键的对象：

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

这样写(渲染所需的值)：

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

Working sandbox.

标签：reactjs,react-redux,react-router,javascript
来源： https://codeday.me/bug/20191109/2012631.html