我不知道為什么我的組件不呈現更新狀態。 即使狀態被更新並反映在數據庫中

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將具有新的更新，您可以輕松地進行綁定。