无法向Component发送多个参数

时间:2018-03-30 12:01:06

标签: javascript reactjs

我试图将三个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输出时,那里什么都没有。 什么都没有渲染。

我尝试的事情:

  1. 将路线中的handler更改为component
  2. 仅更改为http://localhost:3000/details/77
  3. 等1个参数

    没有任何改变。

    编辑:

    我尝试将代码更改为:

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

    但问题仍然存在。

1 个答案:

答案 0 :(得分:0)

您可以从构造函数中的匹配道具设置状态,该构造函数仅在初始渲染时调用。由于状态未被修改且可直接从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>
        );
    }
}