在外部函数中设置状态/使用状态反应

Question

考虑这个伪代码：

component.js

 ...
import {someFunc} from "./common_functions.js"

export default class MyComp extends Component {
    constructor(props) {
        super(props);

    this.someFunc = someFunc.bind(this);

    this.state = {...};
    }

    _anotherFunc = () = > {
        ....
        this.someFunc();
    }

    render() {
        ...
    }
}

common_functions.js

 export function someFunc() {
    if(this.state.whatever) {...}
    this.setState{...}
}

我如何将函数 someFunc() 绑定到 Component 的上下文？我在各种组件中使用它，因此将它们收集在一个文件中是有意义的。现在，我收到错误消息“无法读取任何未定义的内容”。 this 的上下文未知…

原文由 four-eyes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在组件外部设置状态，因为它是组件的本地状态。如果您需要更新共享的状态，请创建一个商店（redux 商店）。

在您的情况下，您可以在一个地方定义 someFunction 并将特定状态变量或整个状态传递给它。在完成 someFunction 后，返回修改后的状态并使用 setState 将其更新回组件中。

 export function someFunc(state) {
    if(state.whatever) {...}
    const newState = { ...state, newValue: whateverValue }
    return newState
}

_anotherFunc = () = > {
        ....
        const newState = this.someFunc(this.state);
       this.setState({newValue: newState});
    }

原文由 Umesh 发布，翻译遵循 CC BY-SA 3.0 许可协议