Question

我正在尝试做一个简单的任务，输入框中输入文本，然后在提交中列出。我不知道如何在不刷新的情况下反映变化。

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为undefined。我很天真就知道如何继续。请帮忙。

Answer 1

如果您在保存数据后返回数据，那么您可以通过将返回的数据添加到此状态来简单地反映更改而无需刷新

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

您希望这段代码呈现Todo组件而不是TodoList：

 {
   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。

在React中反映更改而不刷新

2 个答案: