React setStateは "オブジェクトをレンダリングできません"エラーを発生させます

Question

フォームを持つ単純なステートフルコンポーネントがあります。

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({newIssue})

これはなぜあるのsetState({issue: newIssue})からの呼び出しを変更することにより、このエラーを回避するハックすることができますか？私は間違って何をしていますか？

Answer 1

問題は、有効なオブジェクトthis.state.issueに割り当てているという問題ではありません。

エラーメッセージは、コンポーネントまたは子どものどこかで値this.state.issueを表示しようとしていることを示しています。しかしReactはオブジェクトを直接レンダリングしません。

ですから、

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

のような何かをしたか、あなたが小道具としてthis.state.issueを通過した後、子コンポーネントでそれをレンダリングしようとした場合、あなたはまた、エラーを受け取ることになります。

レンダリングする前に、表示する部分のthis.state.issueを選択する必要があります。これは有効でしょう：