我如何检查 onclick 道具比 redux 状态更快答案

【问题标题】：How can i check with onclick props is faster than redux state我如何检查 onclick 道具比 redux 状态更快
【发布时间】：2021-02-14 04:09:26
【问题描述】：

const dispatch = useDispatch();
const { emotionCard } = useSelector((state) => state.selectedReducer);
const [check, setCheck] = useState(false);

const selectId = props.id
const emotionId = emotionCard.selectId
// const emotion

const handleClick = (e) => {
    dispatch((selectEmotionAction({selectId})));
    console.log(selectId, emotionId)
}

if (props.id === "joy"){
    return (
        <SelectBox onClick={handleClick} check={check}>
            <SelectBox_Left>
                <img src={check ? joyWhite : joyPink}/>
                <SelectText check={check}>1</SelectText>
            </SelectBox_Left>
            <SelectBox_Right_1>
                <img src={fundingImg1}/>
            </SelectBox_Right_1>
        </SelectBox>
    )
} else if (props.id === "kind") {
    return (
        <SelectBox onClick={handleClick} check={check}>
            <SelectBox_Left>
                <img src={check ? kindWhite : kindPink}/>
                <SelectText check={check}>0</SelectText>
            </SelectBox_Left>
            <SelectBox_Right_2>
                <img src={fundingImg2}/>
            </SelectBox_Right_2>
        </SelectBox>
    )
} else if (props.id === "thanks") {
    return (
        <SelectBox onClick={handleClick} check={check}>
            <SelectBox_Left>
                <img src={check ? thanksWhite : thanksPink}/>
                <SelectText check={check}>2</SelectText>
            </SelectBox_Left>
            <SelectBox_Right_3>
                <img src={fundingImg3}/>
            </SelectBox_Right_3>
        </SelectBox>
    )
} else if (props.id === "uncomfortable") {
    return (
        <SelectBox onClick={handleClick} check={check}>
            <SelectBox_Left>
                <img src={check ? unWhite : unPink}/>
                <SelectText check={check}>3</SelectText>
            </SelectBox_Left>
            <SelectBox_Right_4>
                <img src={fundingImg4}/>
            </SelectBox_Right_4>
        </SelectBox>
    )
}

}

如果我的 selectId ===emotionId 是 true 和 false setcheck 切换，我想在 handleclick 中获取函数！但我调试它，在handleclick中selectId比emotionId快

所以我的控制台喜欢 (joy, undefined) => 如果我点击 kind => (kind, joy) 像这样。我怎么解决这个问题？？ :(

【问题讨论】：

你在数组emotionCard中有属性selectId吗？

标签： javascript reactjs redux use-state

【解决方案1】：

你必须像这样将emotionCard存储在本地状态：

 const { emotionCard } = useSelector((state) => state.selectedReducer)
 const [emotionId, setEmotionId] = useState(emotionCard)

 useEffect(() => {
    if (emotionCard) setEmotionId(emotionCard.selectId)
 },[emotionCard])

【讨论】：