每次页面加载时从 url 获取 ID 元素并将其存储在会话数组中答案

【问题标题】：Get ID element from url and store it in a session array every time page loads每次页面加载时从 url 获取 ID 元素并将其存储在会话数组中
【发布时间】：2019-08-02 14:32:52
【问题描述】：

在 reactjs 中，我试图将 id 存储到来自 URL 的会话存储数组中，例如，http://localhost:3000/#/carnivallist/171 存储所有 id 的解决方案是什么？

我只能存储一个 id。当页面刷新时，会话存储中的 id 将被替换。

componentDidMount() {


        if(this.props.params.id) {
            let pro_id=[this.props.params.id];
            console.log(pro_id);

            console.log("otem");
            let items=sessionStorage.getItem("carnival_dones");
            console.log(items);
            if(items!=""){
                this.setState({ carnival_done: [...this.state.carnival_done,{carnival_done:pro_id}]});

            }else{
                this.setState({carnival_done:pro_id});
            }

        }
    }

我希望得到一个数组中的所有 id，但会话存储只存储最后一个值被保存。以及无法通过会话 get 方法访问的值

【问题讨论】：

你是如何存储值的？
@Zicsus 在渲染中我已经给出了 sessionStorage.setItem("carnival_dones",this.state.carnival_done);
您是否尝试存储一个“carnival_done”数组，例如 ['20', '30', '40'] 或类似 [{carnival_done: '20'}, {carnival_done: ' 30'}, {carnival_done: '40'}]
@Zicsus 喜欢 [20,30,40]
那么你设置状态的方式是错误的。看我的回答。

标签： reactjs session-storage

【解决方案1】：

你必须保存一个数组，类似于下面的代码：

let items = JSON.parse(sessionStorage.getItem("carnival_dones"));
if(!items){
 items = []
}
items.push(this.state.carnival_done)
sessionStorage.setItem("carnival_dones",items);

【讨论】：

【解决方案2】：

尝试将数组保存为json并在检索时对其进行解析。

componentDidMount() 
{
    if(this.props.params.id) 
    {
        let pro_id = this.props.params.id;
        let items = JSON.parse(sessionStorage.getItem("carnival_dones"));        

        if(items)
        {
            this.setState({ carnival_done: [...this.state.carnival_done, pro_id]});
        }
        else
        {
            this.setState({carnival_done: [pro_id]});
        }
    }
}

// Save session
save = () =>
{
    sessionStorage.setItem("carnival_dones", JSON.parse(this.state.carnival_done));
}

【讨论】：

【解决方案3】：

问题是我使用的是 componentDidMount 方法而不是使用 componentWillMount 所以我找到了改变钩子的解决方案

 componentWillMount() {
    if(this.props.params.id) {
        let pro_id=[this.props.params.id];
        console.log(pro_id);

        console.log("otem");
        let items=sessionStorage.getItem("carnival_dones");
        console.log(items);
        if(items!=null){
            this.setState({carnival_done:[...this.state.carnival_done,[items,pro_id]]});
            //this.setState({ carnival_done: [...this.state.carnival_done,pro_id]});
            console.log(this.state.carnival_done);
        }else{
            this.setState({carnival_done:[pro_id]});
        }


    }

}

非常感谢您的支持

【讨论】：