React Hook UseEffect с className

Question

Разве невозможно обновить classNames при повторном рендеринге?

const [selected, setSelectedState] = useState(true);

let className = "none";
useEffect(() => {
    className = "appointment-item " + (selected ? "selected" : "");
    console.log(className );
}, [selected] );


return (
  <div className={`${className}`} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

className в консоли отображается правильно, но при повторном рендеринге div (что я вижу из-за обновления случайного числа), className остается как "нет". Я также сбит с толку, потому что я думал, что useEffect запускается сразу же ... поэтому он никогда не должен быть "none" в первую очередь, потому что он должен быть сразу же перезаписан?

Answer 1

Чтобы добавить больше подробностей к ответам @MarkoCen (это верно), есть несколько вещей, которые нужно знать при работе с крючками:

• useEffect выполняется после каждый рендер.

• При каждом рендеринге компонент повторно запускается с начала, после определения перехватчиков. Учитывая ваш код (я добавил комментарии для идентификации каждого цикла)

const [selected, setSelectedState] = useState(true); // 0

let className = "none"; // 1

useEffect(() => { 
    // 3
    className = "appointment-item " + (selected ? "selected" : "");
    console.log(className );
}, [selected] );

// 2
return (
  <div className={`${className}`} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

Вот циклы в следующем порядке:

Первый рендер:

• 0: useState

• 1: className = none

• 2: визуализация с className = none

• 3: useEffect

Повторное отображение:

• 1: className = none

• 2: выполнить повторную визуализацию с className = none

• 3: useEffect

Как видно каждый рендеринг каждый раз устанавливает className в «none», поэтому у вас никогда не будет того, что вы ожидаете.

Answer 2

Нет необходимости useEffect, поскольку selected уже определено как состояние, и вы можете вычислить имя класса из selected

const [selected, setSelectedState] = useState(true);

const className = "appointment-item " + (selected ? "selected" : "");

return (
  <div className={className} />
)

Answer 3

Вам не нужно использовать useEffect для этого.

все, что вам нужно,

const [selected, setSelectedState] = useState(true);

let clsName = 'appointment-item ' + (selected ? 'selected' : '');

return(
<div className={`${clsName}`} onClick={() => setSelectedState(!selected)}>
{Math.random()}
</div>
)

Answer 4

Этого можно добиться, используя хук useState для переменной className, если вы хотите использовать useEffect:

const [selected, setSelectedState] = useState(true);
const [className , setClassName] = useState("none");

useEffect(() => {
    setClassName("appointment-item " + (selected ? "selected" : ""))
    console.log(className );
}, [selected] );


return (
  <div className={className} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

Но я настоятельно рекомендую ответ @MarkoCen.