Question

我有一个带有表单的简单statefull组件。

export class example extends React.Component {
  constructor() {
    this.state = {
      issue: {id: '', isValid: false}
    }
    this.onSubmit = this.onSubmit.bind(this)
  }

  onSubmit (e) {
    fetch('/some/api/path').then((newIssue) => {
      newIssue.json().then(convertedIssue => {
        this.setState({issue: convertedIssue})  
      })
    })
  }

  render() {
    const issue = this.state.issue
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          ID: {issue.id}
          ...
        </form>
      </div>
     )
   }

当我收到API响应时会出现问题。响应是一个简单的对象，它映射在构造函数中初始化状态的问题对象。当我尝试拨打setState({issue: issue})时，我收到错误：Uncaught (in promise) Error: Objects are not valid as a React child (found: Sun Nov 06 2016 16:00:00 GMT-0800 (PST)). If you meant to render a collection of children, use an array instead.

我可以通过将来电从setState({issue: newIssue})更改为setState({newIssue})

来解决此错误

这是为什么？我做错了什么？

Answer 1

问题不在于您将对象分配给this.state.issue的值，这是有效的。

错误消息表明您正在尝试呈现this.state.issue值的组件或子项中的某个位置。但是React不会直接渲染对象。

所以，如果你做了像

这样的事情

render() {
 return <div>{this.state.issue}</div>
}

或者如果您将this.state.issue作为道具传递，然后尝试在子组件中渲染它，您也会收到错误。

在渲染之前，您需要选择要显示的this.state.issue部分。这是有效的：

render() {
  return (
    <span>Issue Id: {this.state.issue.id}</span>
  )
}

React setState导致＆＃34;无法呈现对象＆＃34;错误

1 个答案: