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将具有新的更新，您可以轻松地对其进行绑定。

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

1 个答案: