javascript - 在外部函数中设置状态/使用状态 react

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() 绑定(bind)到 Component 的上下文？我在各种组件中使用它，因此将它们收集在一个文件中是有意义的。现在，我收到错误消息“无法读取任何未定义的内容”。 this 的上下文未知...

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});
    }