在与Axios的React中未正确传递的编辑TODO列表状态

Question

我有一个组件，该组件列出了当前的todo，您可以添加自己的todo's and删除todo，该木材正在100％起作用。我面临的唯一问题是更新我当前的托尔托。我在下面添加了必要的代码，将不胜感激。

我正在使用Proptypes，可以看到我在控制台上有警告，我怀疑可能是问题所在。这是警告：

Warning: Failed prop type: The prop `editTodo` is marked as required in `TodoItem`, but its value is `undefined`.
    in TodoItem (at Todos.js:10)
    in Todos (at App.js:83)
    in section (at App.js:82)
    in Route (at App.js:75)
    in main (at App.js:73)
    in div (at App.js:72)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:71)
    in App (at src/index.js:7)

这是我的编辑待办按钮：

        <div id="card-item-edit">
          <button
          className="edit-btn"
          onClick={() => this.toggleForm()}>
          EDIT
          </button>
          {this.showEditTodoForm()}
        </div>

在我的编辑todo按钮中，我分配了一个切换函数ONCLICK，如果true：

，它将打开输入字段

  toggleForm = () => {
    if (!this.state.isShowing) {
      this.setState({ isShowing: true });
    } else {
      this.setState({ isShowing: false });
    }
  }

通过状态并打开此形式onclick

  showEditTodoForm = () => {
    if(this.state.isShowing) {
      return(
        <div>
          <form onSubmit={this.handleFormSubmit}>
          <input
              type="text"
              name="edit todo"
              placeholder="Edit Your Todo"
              value={this.state.value}
              onChange={this.onChange}
            />
          </form>
        </div>
      )
    }
  }

onsubmit使用Axios更新值。我想我可能在这里做错了什么，我尝试与Postman进行测试，但无法使其正常工作，这是我的thangerformsubmit函数：

  handleFormSubmit = (id) => {
    const title = this.state.title;
    event.preventDefault();
    axios.put(`http://localhost:3004/todos/${id}`,
      {
        title
      },
    )
      .then(() => {
      })
      .catch(error => console.log(error))
  }

我还使用表单提交中的onchange属性，这是函数：

onChange = (e) =>
  this.setState({
    [e.target.name]: e.target.value  // demo react tools to show what happens when value changes when typing
  }
  );

Answer 1

设法通过Codementor的在线导师解决了这一问题，强烈建议任何遇到此类问题的人推荐此资源。这是解决方案：

编辑todo表格，使用ref的传递状态：

showEditTodoForm = () => {
    const { title} = this.props.todo
    if(this.state.isShowing) {
      return(
        <div>
          <form ref={this.formRef} onSubmit={this.handleFormSubmit}>
          <input
              type="text"
              name="title"
              placeholder="Edit Your Todo"
              defaultValue={title}
            />
            <input type="submit" value="Save" />
          </form>
        </div>
      )
    }
  }

handleFormSubmit = (e) => {
    e.preventDefault()
    const title = this.formRef.current['title'].value
    const { id } = this.props.todo
    this.props.editTodo(id, title)
  }

然后，我正在使用Proptypes传递到我的主要组件：

editTodo = (id, title) => {
    axios.put(`http://localhost:3004/todos/${id}`,
      {
        title
      },
    )
      .then(({data}) => {
        this.setState(prevSate => {
          const { todos } = prevSate;
          const oldTodoIndex = todos.findIndex(todo => todo.id === data.id )
          const newTodo = {...todos[oldTodoIndex], ...data}
          todos.splice(oldTodoIndex, 1, newTodo)
          return {todos: todos}
        })
      })
      .catch(error => console.log(error))
  }