Поле ввода не обновляется из состояния redux, но отображает значение в console.log в реакции

Question

Я выполняю задачу со списком задач, используя стек mern, используя redux в качестве управления состоянием. Я хочу обновить свой флажок из состояния redux для выполненной задачи. Флажок всегда устанавливается пустым при запуске страницы, даже если некоторые задачи присутствуют как уже завершенные в состоянии redux, т.е. флажок установлен в true в состоянии redux.

Мой код следующий -

const TaskItem = ({tasks:{task,_id,date,checkbox},deleteTodo,loading}) => {
    useEffect(() => {
        setformData({

            checkbox1:checkbox})
        
    }, [])
    console.log(checkbox);
const [formData,setformData]=useState({
    checkbox1:""
})

const {checkbox1}=formData;
const onChange=e=>{
    setformData({...formData,[e.target.name]:e.target.value})
}

    return (
        <div className="list">
        <p>
        
        <Moment style={{backgroundColor:"rgba(27,112,137)", border:"1px"}}
        format='YYYY/MM/DD hh:mm a'>
        
        {date}
        
        
        </Moment>
        <br/>
        <input
            name="checkbox1"
            type="checkbox"
            value={checkbox1}
            onChange={e=>onChange(e)}
            />

это мой скриншот домашней страницы и состояния редукции

Answer 1

Похоже, вы пытаетесь разложить массив неправильно:

Попробуйте заменить это:

tasks: {task,_id,date,checkbox}

на

tasks: [{ task, _id, date, checkbox }, { task: task2, _id: _id2, date: date2, checkbox: checkbox1 }]

Answer 2

Думаю, вы можете удалить эту строку

useEffect(() => {
        setformData({

            checkbox1:checkbox})
        
    }, [])

, потому что она снова вызывает setFormData, хотя она была изменена в функции onChange.