编辑待办事项列表状态在与 axios 的反应中未正确传递答案

【问题标题】：edit todo list state not passed correctly in react with axios编辑待办事项列表状态在与 axios 的反应中未正确传递
【发布时间】：2019-05-11 07:50:25
【问题描述】：

我有一个列出当前待办事项的组件，您可以添加自己的待办事项和删除待办事项，它 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>

在我的编辑待办事项按钮中，我分配了一个切换功能 onClick，如果为 true，则打开输入字段：

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

通过状态并在单击时打开此表单

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

【问题讨论】：

什么意思？？？？ if (!this.state.isShowing) { this.setState({ isShowing: true }); } else { this.setState({ isShowing: false }); } 意思是 if(true) isShowing = true, if(false) isShowing = false 我认为你应该这样写：toggleForm = () => { this.setState({ isShowing: !this.state.isShowing }); }
@vlad-grigoryan 这只是切换输入的工作状态。

标签： reactjs

【解决方案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))
  }

【讨论】：