Question

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

未捕获的TypeError：无法读取未定义的属性'updater'

我该如何解决？我可以使用React钩useState并传递setter函数，但是如果我想使用类组件而不是功能组件怎么办？还是我只是无法通过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

如果没有返回未定义的内容，我将更多地将此功能视为检查返回sessionStorage对象。将this.state发送到fn（）中，然后检查响应并返回响应。

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

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

只是脑筋急转弯..

Answer 2

怎么样？

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”的方法传递给hydrateStateWithSessionStorage函数。到那时，该方法已在函数中调用，作用域已更改，并且“ this”未定义或不再相同。

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

2 个答案: