我的复选框未预先填充 redux state 中存在的值，即 true 或 false

Question

我正在尝试从 redux state 将值设置为 true 并且没有设置为 false 的勾选，但复选框始终设置为在服务器启动时勾选。 我的 onchange 处理程序也工作正常，console.log 也显示正确的值。

我的代码如下-

const TaskItem = ({tasks:{task,_id,date,checkbox},deleteTodo,loading}) => {
const [formData,setformData]=useState({
    checkbox1:{checkbox}
})

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

    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"
            checked={checkbox1}
            onChange={e=>onChange(e)}

       
    

            />
        
    
        {task}
        
        <span>
        
        
        <i className="fas fa-trash" onClick={()=>{deleteTodo(_id)}}></i>
        
        </span>
        </p>
        
            
        </div>
        
    )
}

TaskItem.propTypes = {
    tasks:PropTypes.object.isRequired,
    deleteTodo:PropTypes.func.isRequired,
    


}

export default connect(null,{deleteTodo}) (TaskItem)

Answer 1

const [formData,setformData]=useState({
    checkbox1:{checkbox}
})

相当于：

const [formData,setformData]=useState({
    checkbox1:{checkbox: checkbox}
})

所以<input checked={checkbox1} />在开始时就像： <input checked={{checkbox: false}} /> ，所以复选框将被选中。 （因为{checkbox: false}是truthy的。）

所以根据checkbox redux state 的类型，更改它。 如果它是真/假值，请将代码更改为：

const [formData,setformData]=useState({
    checkbox1: checkbox
})

如果它是 object 并且具有选中的属性，请将其更改为： checkbox1: checkbox.ischecked