我的问题是忘记了道具周围的花括号被发送到一个表示组件:

之前:

const TypeAheadInput = (name, options, onChange, value, error) => {

后

const TypeAheadInput = ({name, options, onChange, value, error}) => {

对于那些提到Stringify()和toString()作为解决方案的人，我会说这对我有用，但我们必须理解问题以及为什么会发生。在我的代码中，这是一个简单的问题。我有2个按钮调用相同的函数，但其中一个按钮没有正确地将参数传递给该函数。

React子(单数)应该是基本数据类型的类型而不是对象，或者它可以是JSX标记(这不是在我们的情况下)。在开发中使用Proptypes包以确保进行验证。

只是一个快速的代码片段(JSX)比较，以代表您的想法:

Error : With object being passed into child <div> {/* item is object with user's name and its other details on it */} {items.map((item, index) => { return <div key={index}> --item object invalid as react child--->>>{item}</div>; })} </div> Without error : With object's property(which should be primitive, i.e. a string value or integer value) being passed into child. <div> {/* item is object with user's name and its other details on it */} {items.map((item, index) => { return <div key={index}> --note the name property is primitive--->{item.name}</div>; })} </div>

TLDR;(来自下面的源代码):确保你在JSX中呈现的所有项都是原语，而不是使用React时的对象。发生此错误通常是因为分派事件的函数被赋予了一个意外的对象类型(即当您应该传递字符串时传递了一个对象)或组件中的JSX部分没有引用原语(即此。Props vs . this.props.name)。

Source - codingbismuth.com

这是我的代码:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      value: null,
      getDatacall : null
    }
    this.getData = this.getData.bind(this)
  }
  getData() {
  //   if (this.state.getDatacall === false) {
    sleep(4000)
    returnData("what is the time").then(value => this.setState({value, getDatacall:true}))
    // }
  }
  componentDidMount() {
    sleep(4000)

    this.getData()
  }
  render() {
    this.getData()
    sleep(4000)
    console.log(this.state.value)
    return (
      <p> { this.state.value } </p>
    )
  }
}

我就遇到了这个错误。我不得不把它改成

 render() {
    this.getData()
    sleep(4000)
    console.log(this.state.value)
    return (
      <p> { JSON.stringify(this.state.value) } </p>
    )
  }

希望这能帮助到一些人!

在我的例子中，这是因为必须在运行时注入动态数组。

我只是为对象添加了空检查，它工作得很好。

之前:

...
render(
...
    <div> {props.data.roles[0]} </div>
...
);

后:

...
let items = (props && props.data && props.data.roles)? props.data.roles: [];
render(
...
    <div> {items[i]} </div>
...
);

只是想我将添加到这个，因为我今天有同样的问题，事实证明，这是因为我只是返回函数，当我在<div>标签中包装它时，它开始工作，如下所示

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

以上原因导致了错误。我通过将return()部分更改为:

return (
  <div>
    {gallerySection}
  </div>
);

.．.或者仅仅是:

return gallerySection