Reactでリフレッシュせずに変更を反映

Question

私は単純なタスクを実行しようとしています。テキストが入力された入力ボックスでsubmitを実行すると、以下のようになります。私はリフレッシュせずに変更を反映する方法を知らない。

App.js

constructor(props){ 
    super(props); 
    this.state={ 
    todoList:[] 
    } 
    } 
    componentWillMount(){ 
    console.log("mounting app"); 
    axios.get('http://localhost:8888/todoitems').then((res)=>{ 
    this.setState({todoList: res.data}); 
    }); 
    } 
    save=()=>{ 
    var data={ 
    name:this.refs.newvalue.value, 
    status:'started' 
    }; 
    axios.post('http://localhost:8888/todoitem',data).then((res)=>{ 
    console.log("data inserted is":data); 
    }); 
    } 
    render() { 
    return (
    <div className="App"> 
     <input type="text" ref="newvalue"/> 
     <button onClick={this.save}>Submit</button> 
     <table> 
     <tbody> 
      { 
      this.state.todoList.map(todo => (
       <TodoList 
       key={todo.id} 
       id={todo.id} 
       name={todo.name} 
       status={todo.status} 
       click={this.update.bind(this,todo.id)} 
       /> 
      )}) 
      } 
     </tbody> 
     </table> 
    } 

TodoList.jsこれにより

render() { 
    return (
     <tr onClick={this.props.click}> 
     <td>{this.props.id}</td> 
     <td>{this.props.name}</td> 
     <td>{this.props.status}</td> 
     </tr> 
    ); 
} 

、変更はリフレッシュに反映されます。しかし、私は瞬間を反映した変更が必要です。私はshouldcomponentupdateとcomponentwillupdateを試しましたが、私は未定義としてnextPropsを参照しています。好意してください。

Answer 1

あなたがそれらを保存した後、データを返却している場合は、単にそれが `this.save`機能のコードを追加してください。この

save=()=>{ 
    var data={ 
     name:this.refs.newvalue.value, 
     status:'started' 
    } 
    axios.post('http://localhost:8888/todoitem',data).then((res)=>{ 
     console.log("data inserted is":data); 
     // When data is returned after successfull save 
     // add that data to the "todoList" state. 
     let todoList = [...this.state.todoList] 
     todoList.push(data) 
     // setting back the state will trigger a rerender and will show the changes on screen 
     this.setState({todoList}) 
    }) 
    } 

Answer 2

あなたは、コードのこのビットがないTodoListTodoコンポーネントレンダリングする：

{ 
    this.state.todoList.map(todo=>{ 
     return (
     <Todo key={todo.id} id={todo.id} name={todo.name} status={todo.status} click={this.update.bind(this,todo.id)}/> 
    ) 

    }); 

それともTodoListに配列を渡すと、そこにTodoを作成します。

Answer 3

一般に、リモートエンドポイントからロードされるデータは、ライフサイクルコールバックのcomponentDidMountで実行する必要があります。

あなたはcomponentWillMountコールバックからリストアイテムを取得しています。