将 React class 组件中的 setState 传递给外部函数时出错？

Question

假设数据已经缓存在sessionStorage中。我在外部 CacheService.js 文件中有 hydrateStateWithSessionStorage。我导入这个文件。当我尝试将 this.setState 传递给此函数时，出现此错误：

未捕获的类型错误：无法读取未定义的属性 'updater'

我该如何解决这个问题？我可以使用 React 钩子 useState 并传递 setter 函数，但是如果我想使用 class 组件而不是功能组件怎么办？或者我只是无法传递 setState 因为它在其实现中隐式使用了 'this' 关键字？

   hydrateStateWithSessionStorage(state, setState) {
    // for all items in state
    for (let key in state) {

        // if the key exists in localStorage
        if (sessionStorage.hasOwnProperty(key)) {
            // get the key's value from localStorage
            let value = sessionStorage.getItem(key);
            // console.log(value)
            // parse the localStorage string and setState
            try {
                value = JSON.parse(value);
                console.log('before')
                setState({ [key]: value });
                console.log('after')
            } catch (e) {
                // handle empty string
                setState({ [key]: value });
            }
        }
    }
}


//in the component consuming CacheService
//this.Cache = new CacheService(); //in the constructor

componentDidMount() {
    this.Cache.hydrateStateWithLocalStorage(this.state, this.setState);
    this.Auth.fetch('api/upcomingbill/').then((data) => {
        this.setState({ list: data })
    });
}

Answer 1

这个怎么样？

componentDidMount() {
    this.Cache.hydrateStateWithLocalStorage(this);
    this.Auth.fetch('api/upcomingbill/').then((data) => {
        this.setState({ list: data })
    });
}

然后像这样使用 setState...

hydrateStateWithSessionStorage(ReactComp) {
    for (let key in ReactComp.state) {
        ...
        ReactComp.setState({ [key]: value });
        ....
    }
}

仅供参考，这不是 React 特有的问题。您收到该错误的原因是，您仅将内部使用 "this"（属于特定 class）的方法传递给 hydrateStateWithSessionStorage 函数。到那时，该方法在函数中被调用，范围已经改变并且 "this" 未定义或不再相同。

Answer 2

如果没有 return 未定义，我会将此函数更多地视为检查 return sessionStorage 对象。将 this.state 发送到 fn() 然后检查响应和 return 响应。

componentDidMount() {
 const newState = hydrateState(this.state):

 !!newState && this.setState(newState)
}

脑残粉..

将 React class 组件中的 setState 传递给外部函数时出错？

Error when passing setState in a React class component to an external function?

javascript

caching

setstate

reactjs