try{
    throw new Error(<p>An error occured</p>)
}catch(e){
    return (e)
}

上面的代码产生了错误，然后我重写了它，像这样:

try{
    throw(<p>An error occured</p>)
}catch(e){
    return (e)
}

注意try块中new Error()的删除…

为了避免这个错误消息，编写代码的一个更好的方法是将一个字符串传递给throw new error()而不是JSX，并在catch块中返回JSX，就像这样:

try{
    throw new Error("An error occurred")
}catch(e){
    return (
        <p>{e.message}</p>
    )
}

这是我的代码:

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>
    )
  }

希望这能帮助到一些人!

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

正如我所经历的一样，除了添加“__html”来标记它之外，我通过将标记的HTML放入具有属性“dangerlysetinnerhtml”的span中来解决，如下所示:

  createMarkup(innerHtml){
    return {__html: innerHtml};
  }

  render = () => {
    return (
      <span dangerouslySetInnerHTML={
      this.createMarkup(this.props.details.entryContent)}/>
    );
  }

我的案例在使用reduce时很常见，但这里没有分享，所以我发布了它。

通常，如果你的数组是这样的:

[{值:1}，{值:2}]

你想要呈现这个数组中值的和。JSX代码如下所示

<div>{array.reduce((acc, curr) => acc.value + curr.value)}</div>

当数组只有一个项时，会出现这个问题，例如:[{value: 1}]。 (通常，当你的数组是来自服务器的响应时，这种情况发生，所以你不能保证数组中的项目数量)

当数组只有一个元素时，reduce函数返回元素本身，在这种情况下，它是{value: 1}(一个对象)，它会导致不变性违反:对象是无效的React子错误。

多亏了zerkms的评论，我才注意到我的愚蠢错误:

我有onItemClick(e，项目)当我应该有onItemClick(项目，e)。