Блог

Я не знаю, почему моя форма обновления воссоздает новые данные с элементом, который я передал для редактирования уже существующего элемента, а также, компонент не перезагружается, чтобы показать новое состояние. Я должен обновить его, чтобы увидеть изменения, но я вижу изменения в моем redux chrome inspector сразу после нажатия кнопки Отправить.

Что я сделал, я использовал перехват useEffect для прослушивания изменений в состоянии EditForm.

Полный код тоже находится на моем GitHub, это очень простой код.

Вот код

 EditForm component

import React, {useState, useEffect} from 'react'
import {connect} from 'react-redux'
import {taskEdit} from '../action/taskAction'

function TaskEditForm(props) {

  const [task, setTask] = useState(props.task)

  useEffect(()=>{
    setTask(props.task)
  }, [props])
  
  const handleChange = e => {
    setTask({
      ...task,
      name : e.target.value
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const {name} = task

    const newTask = {
      name
    }

    props.taskEdit(task._id, newTask)
    props.isEditing(false)

  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text"  value={task.name} onChange={handleChange} />
      <button>Edit</button>
    </form>
  )
}

export default connect(null, {taskEdit})(TaskEditForm)

Reducer

 case TASK_UPDATE:
      return {
        ...state,
        tasks : state.tasks.map(task=>{
          if(task.id === action.payload.id){
            return Object.assign({}, task, {
              name : action.payload.task
            })
          } else {
            return task
          }
        })
      }


Action 

export const taskEdit = (id, task) => dispatch => {

  const req = {
    method : "POST",
    headers : {"Content-Type":"application/json"},
    body : JSON.stringify(task)
  }

  fetch('http://127.0.0.1:5000/task/add', req)
  .then(res => res.json())
  .then(data => dispatch({
    type : TASK_UPDATE,
    payload : {
      id,
      task
    }
  }))

}
  

Полный код тоже находится на моем GitHub, это очень простой код.