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

Question

I have a component that lists the current todo's which you can add your own todo's and delete todo's, which is working 100%. The only issue I am facing is updating my current todo's. I have added the necessary code below, help would be appreciated.

I am using proptypes and can see I have warning in my console which I suspect might be the problem. Here is the warning:

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)

Here is my edit todo button:

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

In my edit todo button I have assigned a toggle function onClick which opens input field if true:

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

Which passes state and opens this form 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 the value is updated with Axios. I think I might be doing something wrong here, I tried testing with Postman but just can't get it working, here is my handleFormSubmit function:

  handleFormSubmit = (id) => {
    const title = this.state.title;
    event.preventDefault();

    axios.put(`http://localhost:3004/todos/${id}`,
      {
        title
      },
    )
      .then(() => {

      })
      .catch(error => console.log(error))
  }

I am also using the onChange property in the form submit, here is the function:

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

Answer 1

Managed to resolve this with online mentor from Codementor, would highly recommend this resource for anyone stuck with problems like these. Here is the solution:

Edit todo form, using ref's to pass state:

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

Then I am using proptypes to pass to my main component:

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