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

Question

在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 方法访问

Answer 1

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

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

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

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


    }

}

非常感谢您的支持

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

Get ID element from url and store it in a session array every time page loads

session-storage

reactjs