javascript - 更新 React Hook 对象元素

Question

我有一个下拉列表，用户可以在其中选择他们想要设置待办事项的日期。根据我将添加的日期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>
    )

}

标签： javascriptreact-nativereact-hooks

Answer 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>
    )

}