更新 React Hook 对象元素答案

【问题标题】：update React Hook Object element更新 React Hook 对象元素
【发布时间】：2020-07-25 10:35:19
【问题描述】：

我有一个下拉列表，用户可以在其中选择他们想要设置待办事项的日期。根据日期我将添加true。

通过选择字段，例如Monday，如果用户选择afternoon 并且还选择evening，那么下午字段一定不会受到影响。那有可能吗。请帮帮我。

这是我的代码

const ToDo = () =>{
    const [selectedCat, setSelected] = useState('')
    const [mon, setMon] = useState([{
        'morning':[],
        'afternoon':[],
        'evening':[]
    }])

    const days = [
        {itemName: "Select a day"},{itemName: "Monday"},
        {itemName: "Tuesday"},
        {itemName: "Wednesday"},{itemName: "Thursday"},
        {itemName: "Friday"},{itemName: "Saturday"},
        {itemName: "Sunday"}
    ]

    const whichDay = () =>{
        switch(selectedCat){
            case selectedCat === 'Monday':
                setMon({
                    "morning": true
                })
            default:
                break
        }
    }
    return(
        <Picker
            mode="dropdown"
            selectedValue={selectedCat}
            onValueChange={(itemValue, itemIndex) => setSelected(itemValue) && whichDay()}
        >
            {category.map((item, index) => (
                <Picker.Item
                    label={item.itemName}
                    value={item.itemName}
                    index={index}
                />))}
        </Picker>
    )

}

【问题讨论】：

标签： javascript react-native react-hooks

【解决方案1】：

const ToDo = () =>{
    const [selectedCat, setSelected] = useState('')
    const [mon, setMon] = useState([{
        'morning':[],
        'afternoon':[],
        'evening':[]
    }])

    const days = [
        {itemName: "Select a day"},{itemName: "Monday"},
        {itemName: "Tuesday"},
        {itemName: "Wednesday"},{itemName: "Thursday"},
        {itemName: "Friday"},{itemName: "Saturday"},
        {itemName: "Sunday"}
    ]

    const whichDay = () =>{
        switch(selectedCat){
            case selectedCat === 'Monday':
                setMon((aAlreadySelectedState)=>{return {
                    "morning": true,
                    ...aAlreadySelectedState
                }})
            default:
                break
        }
    }
    return(
        <Picker
            mode="dropdown"
            selectedValue={selectedCat}
            onValueChange={(itemValue, itemIndex) => setSelected(itemValue) && whichDay()}
        >
            {category.map((item, index) => (
                <Picker.Item
                    label={item.itemName}
                    value={item.itemName}
                    index={index}
                />))}
        </Picker>
    )

}

【讨论】：