对象无效,因为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;

Sandbox.

答案

完整的错误消息:

对象作为React子对象无效(找到:具有键{seo_val,text_val}的对象)。

错误很明显,您正在尝试在jsx中呈现包含两个键的对象:

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

像这样写,(渲染你想要的值):

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

Working sandbox.

另一答案

看起来像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 错误:对象作为 React 子级无效,如果您打算渲染子级集合,请改用数组

错误:对象作为 React 子对象无效(找到:带有键 low, high 的对象)

错误:对象作为 React 子对象无效(找到:带键的对象..........)

错误:对象作为 React 子对象无效,但我的数据是对象数组?