React useEffect не может обновить переменные функции

#javascript #reactjs #react-hooks #use-effect

#javascript #reactjs #реагирующие хуки #использование-эффект

Вопрос:

Что касается этой части кода:

 const MyComponent = props => {

    let number = 0
    React.useEffect(() => {
        number = number   1
        console.log('inside useEffect: ', number);
    }, [number])

    console.log('outside useEffect: ', number);

    return <div/>
}

Я ожидаю, что число будет 1 после выполнения useEffect , но вот журнал:

 outside useEffect:  0
inside useEffect:  1
outside useEffect:  0
outside useEffect:  0

Мой вопрос в том, почему useEffect не удается обновить number ? Как я могу обновить простую переменную в useEffect ?

Примечание: этот код является всего лишь примером

Ответ №1:

Вы должны использовать react-hook useState .

 const MyComponent = props => {

    const [number, setNumber] = React.useState(0)
    React.useEffect(() => {
        setNumber(number 1)
    }, [])
    
    React.useEffect(() => {
        console.log(number)
    }, [number])
    
    return <div/>
}

Развернуть фрагмент

1. Любое другое решение? Я не хочу number быть государством.

2. поскольку вы хотите использовать number переменную внутри MyComponent, вам следует использовать state .

3. почему вы не хотите, чтобы число было в состоянии?

4. Я рефакторинг компонента класса в функциональный компонент. У меня есть огромный негосударственный объект с высокой частотой изменений, поэтому его состояние может повлиять на производительность и снизить ее. Я хочу установить для него начальное значение в a useEffect .

5. какова ваша цель использования number в компоненте?

Ответ №2:

Всякий раз, когда вы видите console.log('outside useEffect: ', number) executed , это означает, что был запущен повторный рендеринг. Поскольку вы помещаете журнал внутри тела функции визуализации.

Теперь посмотрите внимательнее, что еще находится внутри тела функции рендеринга?

 let number = 0

Конечно, эта строка кода будет сбрасываться number обратно 0 каждый раз, когда запускается повторный рендеринг. Вот почему.

Хорошо, какое решение у нас есть? useRef() это:

 const MyComponent = props => {
    const number = useRef(0);
    React.useEffect(() => {
        number.current = number.current   1
        console.log('inside useEffect: ', number.current);
    }, [number.current])

    console.log('outside useEffect: ', number.current);

    return <div/>
}

Ответ №3:

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

У вас есть три возможности:

Поместите число в const [number, setNumber] = useState();
useRef(число)
Вы также можете попытаться поместить number вне функции MyComponent, и тогда она должна сохранить значение.

На мой взгляд, предпочтительный способ сделать это с useRef помощью .