我不知道为什么我的组件不呈现更新状态。 即使状态被更新并反映在数据库中

Question

因此，我正在开发一个简单的CRUD note应用程序。 当我的组件进入编辑模式并且完成编辑时，我遇到了这个问题。 PUT请求成功更新了数据库中的内容，并且编辑模式组件将返回到正常注释。 以下是相关代码：

constructor(props) {
    super(props);

    this.state = {
      notes: [],
      id: null,
      title: "",
      content: "",
      toEdit: null
    }

    this.handleTitleChange = this.handleTitleChange.bind(this);
    this.handleContentChange = this.handleContentChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.deleteNote = this.deleteNote.bind(this);
    this.handleEditSubmit = this.handleEditSubmit.bind(this);
  }
  handleContentChange = (event) => {
    this.setState({ content: event.target.value});
  }

这是更新功能：

// Handle new content edit
  handleEditSubmit = (noteId) => {
    console.log(noteId)
    axios.put('http://localhost:3000/notes/' + noteId, 
    {
      content: this.state.content
    })
     .then(res => {
      // Rerender the editNote into a normal note.
      this.setState({ 
      toEdit: null,
     }, () => {console.log(this.state.content, this.state.toEdit)}) 
      console.log(res);
    })
     .catch(err => {
      console.log(err);
      this.setState({ toEdit: null })
     })
  }

最后，当toEdit为null时，呈现普通笔记组件，而当toEdit === index时，呈现编辑模式组件：

{this.state.notes.map((output, index) => {
            if (this.state.toEdit === index) {
              return (
                <div key={index} className="note">
                  <div className="title-container"><h4>{output.title}</h4></div>
                    <textarea 
                      className="textarea"
                      type="text" 
                      name="edit-content" 
                      defaultValue={output.content} 
                      onChange={this.handleContentChange} 
                    />
                    <Button bsStyle="danger" type="button" onClick={this.handleCancel} >Cancel</Button>
                    <Button bsStyle="primary" type="button" onClick={this.handleEditSubmit.bind(this, output.id)} >Done</Button>
                </div>
              )
            } else {
              return (
                <div key={index} className="note">
                  <div className="title-container"><h4>{output.title}</h4></div>
                    <p>{output.content}</p>
                    <Button bsStyle="danger" onClick={this.deleteNote.bind(this, index, output.id)}>Delete</Button>
                    <Button bsStyle="primary" onClick={this.edit.bind(this, index)} >Edit</Button>
                </div>
              )
            }
          }

在PUT请求之后和重新呈现之后，编辑后的文本将不会显示。 必须刷新页面以获取更新的注释。 看看gif： https ： //giphy.com/gifs/dn15rkILhjMyvVl8CX/fullscreen

Answer 1

您没有更改notes []中的任何内容，因为您正在使用{this.state.notes.map((output, index) => {来呈现注释。应该在axios完成后更新notes []实体。像这样的东西

 handleEditSubmit = (noteId) => {
    console.log(noteId)
    axios.put('http://localhost:3000/notes/' + noteId, 
    {
      content: this.state.content
    })
     .then(res => {
      // Rerender the editNote into a normal note.
      this.setState({ 
      toEdit: null,
      notes:res.notes // this is changed part
     }, () => {console.log(this.state.content, this.state.toEdit)}) 
      console.log(res);
    })
     .catch(err => {
      console.log(err);
      this.setState({ toEdit: null })
     })
  }

注意： notes:res.notes // this is changed part更改

因此，此更改之后，this.state.notes将具有新的更新，您可以轻松地进行绑定。