未呈现更新的变量

Question

我正在使用 React。

import React from 'react';

function Scheduler(props) {
    var remainingHours = 5;
    const TimelineHeaderItem = () => {
        remainingHours = 8;
        console.log(remainingHours) // prints 8
        return <></>;
    }
    const name = () => {
        console.log('fetching remaining hours=>', remainingHours); // prints 5
    }

    return (
       <>
        <TimelineHeaderItem /> 
        {name()} 
       </>
    );
}
export default Scheduler;

如您所见，我在TimelineHeaderItem中将remainingHours的值改为了8。
但是当我在 name 函数中访问该值时，它会打印 5 ，这是前一个。
为什么会这样？以及如何访问更新后的值。

Answer 1

普通变量不会创建重新渲染。

状态变量是负责告诉 react 重新渲染的变量之一

At the time, when TimelineHeaderItem updated the variable, the state has already rendered and the name function has already called, so you cant see the variable value change.

这是console.log()

的结果

您必须将变量用作 state 变量，因为它们会导致重新渲染。

import React, {useState, useEffect} from 'react';

function Scheduler(props) {
    const [remainingHours, setHours] = useState(5); //<-- this is state
    const TimelineHeaderItem = () => {
        setHours(8);
        console.log(remainingHours) // prints 8
    }
    useEffect(() => { 
        TimelineHeaderItem(); //<-- this is useEffect, it runs on first render if provided with no dependecies
    },[]);
    
    const name = () => {
        console.log('fetching remaining hours=>', remainingHours); // prints 5
    }

    return (
       <>
        {/*<TimelineHeaderItem />  <--- No need of this now */}
        {name()} 
       </>
    );
}

您可以在此处阅读有关钩子及其功能的更多信息 https://reactjs.org/docs/hooks-state.html 导出默认调度程序；

Answer 2

在 React 中，屏幕上显示的内容应该来自组件的状态。改变组件的状态告诉 React 重新渲染组件。简单地重新分配一个变量本身，就像你正在做的那样，没有副作用。

此外，TimelineHeaderItem 没有任何意义 - 它没有返回任何内容。如果您希望它更改 remainingHours，请为此使用普通函数，而不是尝试将其呈现为组件。

类似地，如果您希望 name 在屏幕上显示剩余时间，请将其作为一个组件而不是在 JSX 中调用它。（或者完全删除它，然后将 remainingHours 插入 JSX。）类似于：

const App = () => {
    const [remainingHours, setRemainingHours] = React.useState(5);
    const changeHours = () => setRemainingHours(8);
    return <div>
        <button onClick={changeHours}>click</button>
        <div>{remainingHours}</div>
    </div>;
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

未呈现更新的变量

Updated variable is not rendered

state

rerender

reactjs

react-functional-component

use-state