React Hooks，在onClick函数中有条件地更改状态，在下次单击时更新

debugcn 发表于 Dev

伊斯恩加特

您好，我有一个列表组件，它呈现了一些<Card>具有的组件prop isSelected。因为很多事情发生在一个<Card>组件都有isSelected === true我加了state上<List>组件，我要当有人点击一个卡检查：

1）如果没有以前选择的项目（state===null将其ID添加到状态）

2）如果某人在状态中已经选择了某个项目的情况下单击同一项目或另一项目，则仅取消选择活动项目。

import {Card} from "./Card";
import cloneDeep from 'lodash/cloneDeep';

const List = () => {
    const [selectedCard, setSelectedCard] = useState(null);

    const onCardClick = id => {
        console.debug(selectedCard, id)
        const newSelectedCard = cloneDeep(selectedCard);
        // if he clicks another item while an item is active
        // or if he clicks the same item while active
        // should just make it inactive
        if (newSelectedCard !== null || newSelectedCard === id) {
            setSelectedCard(null)
        } else {
            setSelectedCard(id)
        }
        console.debug(selectedCard, id)
    }

    return (
        <ul className="card-list">
            {cardData.map(card => (
                <Card
                    onClick={() => onCardClick(card.id)}
                    key={card.id}
                    isSelected={selectedCard === card.id}
                    {...card}
                />
            ))}
        </ul>
    )
}


export const CardList = () => (
    <List/>
);

问题是2console.debugs显示相同的值，这意味着状态不会立即更新，并且Im在这里和那里遇到一些奇怪的行为。我在这里想念什么吗？

哈比尔

基本上你需要遵循以下三个条件

if(newSelectedCard === null){
        setSelectedCard(id)
    }
    else if(newSelectedCard === id){
        setSelectedCard(null);
    }
    else{
        setSelectedCard(id)
    }

这是完整的示例：

import cloneDeep from 'lodash/cloneDeep';
import React, {useState} from "react";

const List = () => {
    const [cardData, setCardData] = useState([
        {id: 1, title: 'First Card'},
        {id: 2, title: 'Second Card'},
        {id: 3, title: 'Third Card'},
        {id: 4, title: 'Fourth Card'},
    ]);
    const [selectedCard, setSelectedCard] = useState(null);

    const onCardClick = id => {
        console.log(selectedCard, id);
        const newSelectedCard = cloneDeep(selectedCard);
        // if he clicks another item while an item is active
        // or if he clicks the same item while active
        // should just make it inactive
        if(newSelectedCard === null){
            setSelectedCard(id)
        }
        else if(newSelectedCard === id){
            setSelectedCard(null);
        }
        else{
            setSelectedCard(id)
        }
        console.log(selectedCard, id)
    };

    return (
        <ul className="card-list">
            {cardData.map(card => (
                <Card
                    onClick={() => onCardClick(card.id)}
                    key={card.id}
                    isSelected={selectedCard === card.id}
                    {...card}
                />
            ))}
        </ul>
    )
};

export const CardList = () => (
    <List/>
);

const Card = (props) => {
    const backColor = props.isSelected? '#F9740E' : '#3FB566';
    return (
        <div onClick={() => props.onClick()}>
            <div style={{backgroundColor: backColor, border: '1px solid darkgreen', color: 'white', padding: 10, marginBottom: 10}}>
                <h3>{props.id}</h3>
                <h4>{props.title}</h4>
            </div>
        </div>
    );
};

这里更新是代码沙箱

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。