未呈现更新的变量

Question

我正在使用反应。

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 中，屏幕上显示的内容应该来自组件的状态。改变组件的状态告诉 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>

Answer 2

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

状态变量是负责告诉react to rerender的变量之一

当时TimelineHeaderItem更新变量时，状态已经渲染，name函数已经调用，所以看不到变量值变化。

这是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 导出默认调度器；