javascript - 导入文件的变量未更新

Question

我尝试导入一个文件 (ChildFile)，其中包含变量 (testNumber) 和<强>函数 (changeNumber())。 函数应将 (testNumber) 加 1。此 (ChildFile) 由文件 (< em>ConsumerFile)。在渲染内部，我尝试调用函数(changeNumber())。

预期结果:
testNumber 增加 1，结果为 124

实际结果:
函数调用前后的 testNumber 均为 123

信息: 我需要以下应用程序结构 -> ConsumerFile 需要采用其当前结构。不可能有 setState (在我的具体情况下，我尝试为不同的类定义一些东西)

两个文件:

子文件

let testNumber = 123;

const changeNumber = () => {
    console.log(testNumber);  //123
    testNumber = testNumber + 1;
    console.log(testNumber); //124
}

var ChildFile= {
    testNumber: testNumber,
    changeNumber: changeNumber
};

export {ChildFile};

消费者文件

import { ChildFile } from '....ChildFile';

class ConsumeClass extends Component {
    constructor() {
        super();
    }

    render() {
        console.log(ChildFile.testNumber); //123
        ChildFile.changeNumber();
        console.log(ChildFile.testNumber); //123 -> Here it should be 124

        return (
            <div/>
        );
    }
}

export default ConsumeClass;

Answer 1

与

var ChildFile= {
    testNumber: testNumber,
    changeNumber: changeNumber
};

您正在创建一个名为 ChildFile 的新对象，其属性 testNumber 的值为 testNumber。但随后在您的方法中您修改了原始全局变量而不是属性。

这会起作用:

let testNumber = 123;

var ChildFile = {
    testNumber: testNumber,
};

const changeNumber = () => {
    console.log(testNumber);  //123
    ChildFile.testNumber = ChildFile.testNumber + 1;
    console.log(testNumber); //124
}

ChildFile.changeNumber = changeNumber;

export {ChildFile};

但是你最好使用类。