Question

我需要通过 url （作为参数）传递对象并从其他组件获取。
所以，我要 stringify 我的对象并将其作为参数传递，如下所示：

<li key={something}><Link to={{pathname:`/animal/${JSON.stringify(item)}`}}>{item.name}></Link></li>

但是现在浏览器上的url显示为：http://....../animal/[object]，我无法用JSON.parse（）将其转换回json对象。

在新组件上，我得到{this.props.params.obj}，因为我已在路由中声明它：<Route path='/animabl/:obj' component={Animal}></Route>但我无法转换回json对象。

Answer 1

我通过将对象传递到<Link>元素的查询对象来解决了这个问题，如下所示：

<Link to={{pathname:`/animal/${++index}`,query:{'obj':JSON.stringify(item)}}}>{item.name}></Link>

这是代码段：

var data = this.state.animal.results.map((item,index)=>  { 
            return <li key={index.toString()}>
                <Link to={{pathname:`/animal/${++index}`,query:{'obj':JSON.stringify(item)}}}>{item.name}></Link>
            </li>});

然后，在新组件上，我获得obj参数并再次将其转换为JSON，如下所示：

this.props.location.query.obj

在 componentDidMount：

内

componentDidMount:function(){
        /*GET THE OBJECT FROM THE URL PARAM*/
        const tmp =  JSON.parse(this.props.location.query.obj);
        //i manipulate the JSON object....
}

React如何对对象进行searialize并将其传递给url

1 个答案: