时间戳

首页 > 解决方案 > React Router 不会将数组作为组件的 prop

reactjs - React Router 不会将数组作为组件的 prop

问题描述

我正在尝试将一组对象作为道具传递给新路线。但是，每当我通过道具并在浏览器上转到该路线时，我可以（使用 console.log）看到道具中的数组存在，但它是空的。我不知道如何解决这个问题。我已经验证了该数组在作为道具传递之前已填充。

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            routes: []
        }
    }

    addToRoute(record){
        let tempRoutes = this.state.routes.slice();
        tempRoutes[record.id] = record;
        this.setState({
            routes: tempRoutes
        })
    }    

    render() {
        return (
            <div>
                <Route exact path='/' render={() => <Subapp addToRoute={(record) => this.addToRoute(record)}/>}/>
                <Route path={"/record/:id"} render={({match})=><BasicInfo  match={match} {...this.state}/>}/>
            </div>
        );

    }
}

标签： reactjsreact-routerreact-router-v4

解决方案

我不确定您的应用程序哪里出了问题，但是当我尝试重新创建您的问题时，我确实在您的代码中看到了一些明显的部分，这些部分使我的应用程序出错。

<Route exact path='/' render={() => <Subapp addToRoute={(record) => this.addToRoute(record)}/>}/>

这里只需传入this.addToRoute您在组件中填充参数。

<Route path={"/record/:id"} render={({match})=><BasicInfo  match={match} {...this.state}/>}/>

尽可能克制自己不要传递整个状态。相反，请尝试明确定义您需要的道具。如果不这样做，您将来可能会扩展组件中的状态。然后，该州的那些新部分也被传递。此外，显式定义 props 将使您的代码更具可读性。

this.state = {
    routes: []
}

addToRoute(record){
    let tempRoutes = this.state.routes.slice();
    tempRoutes[record.id] = record;
    this.setState({
        routes: tempRoutes
    })
}

这行不通。state最初是一个数组，而在addToRoute()您将其转换为一个对象。

因此，您的代码中确实存在一些不一致之处。在尝试重新创建您的问题时，由于这些错误，我无法使代码正常工作。进行一些调整后，它运行。正如你所看到的，我正在传递路线对象，它被填充到<BasicInfo />. 看看这个 CodeSandBox的工作示例。

让我知道这是否回答了您的问题。

推荐阅读