Question

我有一个列出当前待办事项的组件，您可以添加自己的待办事项和删除待办事项，这可以100％工作。我面临的唯一问题是更新当前待办事项。我在下面添加了必要的代码，将不胜感激。

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

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>

在我的“编辑待办事项”按钮中，我分配了一个切换功能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进行测试，但无法正常工作，这是我的handleFormSubmit函数：

  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的在线指导者解决了这个问题，强烈建议对遇到此类问题的任何人使用此资源。解决方法如下：

使用引用传递状态来编辑待办事项表单：

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)
  }

然后我正在使用原型传递给我的主要组件：

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))
  }

与axios反应时，编辑待办事项列表状态未正确传递

1 个答案: