Question

这一定是很常规的问题。

我正在将道具传递给孩子们，并在那里使用它来请求端点。更详细：我单击列表项，检查单击了哪个项，将其传递给子组件，然后在通过的prop的基础上，我想请求某些数据。一切正常，我得到了我需要的东西，但这只是第一次。当刷新页面时，传入的props消失了，并且我无法在其中使用prop值作为查询的情况下构造适当的URL。有没有办法保留道具，所以当页面刷新时，它将保留最后一个道具。

谢谢！

Answer 1

（您可能想看看：https://github.com/rt2zz/redux-persist，它是我的最爱之一）

就像普通的Web应用程序一样，如果用户重新加载页面，您将重新加载代码。解决方案是，如果您希望关键数据存活下来，则需要将其存储在React状态之外的其他位置。

这是伪代码中的“模板”。我只是使用了一个不存在的“ LocalStorage”类。您可以选择所需的任何方法。

class Persist extends React.Component {
    constuctor(props) {
        this.state = {
            criticalData = null
        }
    }
    componentDidMount() {
        //pseudo code
        let criticalData = LocalStorage.get('criticalData')
        this.setState({
            criticalData: criticalData 
        })
    }

    _handleCriticalUpdate(update) {
        const merge = {
            ...LocalStorage.get('criticalData')
            ...update
        }

        LocalStorage.put('criticalData', merge)
        this.setState({
            criticalData: merge
        })
    }

    render() {
        <div>
            ...
            <button 
                onClick={e => {
                    let update = ...my business logic
                    this._handleCriticalUpdate(update) //instead of set state
                }}
            >
            ....
        </div>
    }
}

通过将关键数据卸载到cookie或本地存储中，您将在组件的生命周期中注入持久性。这意味着当用户刷新页面时，您将保持状态。

希望对您有帮助！

在React.js中保留页面刷新的内部状态

1 个答案: