Question

我试图将三个URL参数传递给React Component。这就是我所做的：

App.js：

<Route path="/details/:id(/:query)(/:type)" handler={DishDetails}/>

DishDetails.js：

class DishDetails extends Component {
    constructor(props) {
        super(props);
        console.log("props in DishDetails: ")
        console.log(props);
        this.state = {
            id: props.match.params.id,
            status: "INITIAL",
            query: props.match.params.query,
            type: props.match.params.type,
        };
    }

render() {
    let ingredientsList;
    switch(this.state.status){
        case "INITIAL":
            return (
                <p>Loading...</p>
            );
            break;
        case "ERROR":
            return (
                <p>An error has occurred, please refresh the page</p>
            );
    }
    return (
        //Only come here if we get a successful response
        <div id="details">
            <div className="dishdetails">
                <h3 id="dishtitle" className="dishtitle">{this.state.title}</h3>
                <img id="dishimg" className="dishimg" src={this.state.img}/>
                <div id="dishtext" className="dishtext col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    {this.state.dishText}
                </div>
                <div className="back-to-search">
                    <Link to="/search" params={{query:this.state.query, type:this.state.type}}><button id="details-backbutton" className="btn btn-default" type="button">Back to Search</button></Link>
                </div>
            </div>
            <Instructions instructions={this.state.instructions} />
            <IngredientsList ingredients={this.state.ingredients} />
            <Sidebar />
        </div>
    );
}

}

然后我转到http://localhost:3000/details/77/myQuery/myType。 2问题很明显： 1.当我在控制台中查看props输出时，那里什么都没有。什么都没有渲染。

我尝试的事情：

将路线中的handler更改为component。
仅更改为http://localhost:3000/details/77

没有任何改变。

编辑：

我尝试将代码更改为：

class DishDetails extends Component {
    constructor(props) {
        super(props);
//        const dish = props.model.getDish(1);
        // do api call
        console.log("props in DishDetails: ")
        console.log(props);
        this.state = {
            id: props.match.params.id,
        };
    }
    render() {
        switch(this.state.status){
            case "INITIAL":
                return (
                    <p>Loading...</p>
                );
            case "ERROR":
                return (
                    <p>An error has occurred, please refresh the page</p>
                );
        }
        return (
            //Only come here if we get a successful response
            <div id="details">
                <div className="dishdetails">
                    <h3 id="dishtitle" className="dishtitle">{this.state.title}</h3>
                    <img alt="details-img" id="dishimg" className="dishimg" src={this.state.img}/>
                    <div id="dishtext" className="dishtext col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        {this.state.dishText}
                    </div>
                    <div className="back-to-search">
                        <Link to={{
                            pathname:"/search",
                            state: {
                                params: {
                                    query:this.props.query,
                                    type:this.props.type,
                                }
                            },
                            }}>
                            <button id="details-backbutton" className="btn btn-default" type="button">Back to Search</button>
                            </Link>
                    </div>
                </div>
                <Instructions instructions={this.state.instructions} />
                <IngredientsList ingredients={this.state.ingredients} />
                <Sidebar />
            </div>
        );
    }
}

但问题仍然存在。

Answer 1

您可以从构造函数中的匹配道具设置状态，该构造函数仅在初始渲染时调用。由于状态未被修改且可直接从props派生，因此您可以直接在渲染中使用道具。

其次，您需要将params传递给/search链接组件略有不同。看看这个问题

How to pass params with history.push in react-router v4?

class DishDetails extends Component {
    constructor(props) {
        super(props);
        console.log("props in DishDetails: ")
        console.log(props);
        this.state = {
            status: "INITIAL",
        };
    }

    render() {
        let ingredientsList;
        switch(this.state.status){
            case "INITIAL":
                return (
                    <p>Loading...</p>
                );
                break;
            case "ERROR":
                return (
                    <p>An error has occurred, please refresh the page</p>
                );
        }
        return (
            //Only come here if we get a successful response
            <div id="details">
                <div className="dishdetails">
                    <h3 id="dishtitle" className="dishtitle">{this.state.title}</h3>
                    <img id="dishimg" className="dishimg" src={this.state.img}/>
                    <div id="dishtext" className="dishtext col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        {this.state.dishText}
                    </div>
                    <div className="back-to-search">
                        <Link to={{ 
                             pathname: "/search", 
                             state: { 
                                params: { 
                                    query:this.props.query,
                                    type:this.props.type
                                }
                             }
                          }}>
                          <button id="details-backbutton" className="btn btn-default" type="button">Back to Search</button></Link>
                    </div>
                </div>
                <Instructions instructions={this.state.instructions} />
                <IngredientsList ingredients={this.state.ingredients} />
                <Sidebar />
            </div>
        );
    }
}

无法向Component发送多个参数

1 个答案: