对象作为 React 子级反应错误无效? [英] Objects are not valid as a React child react error?

问题描述

你能告诉我为什么我会收到这个错误:

<块引用>

对象作为 React 子对象无效(找到:带有键的对象{seo_val, text_val}).如果你想渲染一个孩子的集合，改用数组.

我正在尝试点击 http 请求并尝试下拉.

从react"导入React；类 DropDown 扩展了 React.Component {构造函数(道具){超级(道具)；console.log(this.props);}使成为() {const makeDropDown = () =>{控制台日志(this.data)；返回 this.props.data.map(x => {返回 {x};});};返回 (<div><div><select>{makeDropDown()}</select>;

);}}导出默认下拉菜单；

沙盒.

解决方案

完整的错误信息:

<块引用>

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

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

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

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

return {x.text_val}<​​/option>;

工作沙箱.

could you please tell me why I am getting this error:

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.

I am trying to hit http request and try to make dropdown .

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.

解决方案

Full error message:

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

Error is very clear, you are trying to render an object in jsx that contains two keys:

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

Write it like this, (render the value that you want):

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

Working sandbox.

这篇关于对象作为 React 子级反应错误无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！