Question

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

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

    }
}

Answer 1

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

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

这里只需传入this.addToRoute，即可在组件内填充参数。

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

尽可能避免传递整个状态。相反，请尝试明确定义所需的道具。如果不这样做，将来可能会扩展组件中的状态。然后，状态的那些新部分也随之通过。此外，显式定义道具将使您的代码更具可读性。

this.state = {
    routes: []
}

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

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

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

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

React Router不会将数组作为组件的支持

1 个答案: