setState（）の後にUIがリフレッシュされないのはなぜですか？ （ReactとRailsを使って）

Question

私はReactを学び、助けが必要です。私のイベントでsetState()を呼び出すと、UIが更新されません。データはすべてデータベースに正常にプッシュされますが、手動でページを更新した後にのみ表示されます。うまくいけば、誰かが私を助けることができる...それは同じ問題で今約3日されている。ここに私の構成要素である...

レコード（親）

class Records extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     records: [] 
    } 

    this.handleNewRecord = this.handleNewRecord.bind(this); 
} 

componentDidMount() { 
    this.setState({ 
     records: this.props.records 
    }) 
} 

handleNewRecord(record) { 
    console.log(this.state) 
    const newState = this.props.records.slice(); 
    console.log(newState) 
    newState.push(record) 
    console.log(newState) 
    this.setState({ 
     records: newState 
    }) 
} 


render() { 
    const records = this.props.records.map((record) => 
          <Record record={record} key={record.id} /> 
          ) 
          return (
           <div className="container"> 
            <h1>Records</h1> 
            <RecordForm handleNewRecord={this.handleNewRecord}/> 
            <table className="table"> 
             <thead> 
              <tr> 
               <th>Date</th> 
               <th>Title</th> 
               <th>Amount</th> 
              </tr> 
             </thead> 
             <tbody> 
              {records} 
             </tbody> 
            </table> 
           </div> 
          ) 
    }  
} 

シングルレコード（子）

class Record extends React.Component { 
constructor(props) { 
    super(props); 

} 

render() { 
    return(
     <tr> 
      <td>{this.props.record.date}</td> 
      <td>{this.props.record.title}</td> 
      <td>{this.props.record.amount}</td> 
     </tr> 
    ) 
} 
} 

記録用紙（子）

class RecordForm extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
      record: { 
       title: '', 
       amount: '', 
       date: '' 
      } 
    } 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 

} 

handleChange(e) { 
var key = e.target.name 
var val = e.target.value 
var obj = this.state.record 
obj[key] = val 
this.setState(obj) 
} 

handleSubmit(e) { 
    var that = this; 
    e.preventDefault(); 
    $.ajax({ 
     method: 'POST', 
     data: { 
      record: this.state.record, 
     }, 
     url: '/records', 
     success: function(res) { 
      that.props.handleNewRecord(res) 
      that.setState({ 
       record: { 
       title: '', 
       amount: '', 
       date: '' 
      } 
      }) 
     }, 
    }) 
    console.log('submitted'); 
} 

render() { 
return (
      <form className="form-inline" onSubmit={this.handleSubmit}> 
       <div className="form-group"> 
        <label> 
         <input className="form-control" placeholder="date" type="text" name="date" value={this.state.record.date} onChange={this.handleChange} /><br /> 
        </label> 
        <label> 
         <input className="form-control" placeholder="title" type="text" name="title" value={this.state.record.title} onChange={this.handleChange} /><br /> 
        </label> 
        <label> 
         <input className="form-control" placeholder="amount" type="text" name="amount" value={this.state.record.amount} onChange={this.handleChange} /><br /> 
        </label> 
        <label> 
         <button className="btn btn-primary" type="submit" value="submit" >Create Record</button><br /> 
        </label> 
       </div> 
      </form> 
); 
} 
} 

Answer 1

あなたのレンダリング機能を読み込みますthis.props.records、あなたは小道具を更新していません。状態を更新しています。代わりにthis.state.recordsからお読みください。

render() { 
    const records = this.state.records.map((record) => 
     ... 

Answer 2

あなたが小道具としてレコードを渡している場合は、
コンポーネントの状態でそれを設定する必要はありません。 コンテナーの状態を設定するコールバック関数をpropとして渡します。

handleNewRecord(record) { 
this.props.somefunction(record) 

}

そして、あなたが呼び出している場所からのレコードすなわち親コンポーネントで、機能があるはずのように、

somefunction(record) { 
Record = this.state.record.slice() 
Record.append(record) 
this.setState(record) 

}