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

问题描述

我正在尝试将值设置为 true 并且从 redux 状态将值设置为 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)

标签： javascriptreactjsreduxreact-redux

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

相当于：

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

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

所以根据checkboxredux状态的类型，改变它。如果它是真/假值，请将代码更改为：

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

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

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

问题描述

解决方案

推荐阅读