Question

我有一个API应该呈现title, description, old price和new price，但我不知道如何正确地做到这一点。

这里有我的API的内容组件

export class Content extends React.Component{
    constructor(){
        super();
        this.state={};
    }
    componentWillMount(){
        var url="95.85.23.63:8000/frontend/web/api/v1/user/get-popular";
        Request.get(url).then((reponse)=>{
            this.setState({
                infos:response.body.Search,
                total:response.body.totalResults
            });
        });
    }

    render(){
        var infos=_.map(this.state.infos, (info)=>{
            return <li>{info.title}</li>;
        });

        return(
        <div>
        <ul> {infos}</ul>

        </div>
        )
    }

}

我想我正在以错误的方式检索数据。请你帮助我好吗？

Answer 1

你正在做async电话。因此，您需要在渲染中处理空状态。请参阅以下代码

<强> [编辑]

如评论中所述，建议您在componentDidMount()

中查看请求

export class Content extends React.Component{
    constructor(){
        super();
        this.state={
           infos: [],
           total: 0,
        };
    }
    componentDidMount(){
        var url="95.85.23.63:8000/frontend/web/api/v1/user/get-popular";
        Request.get(url).then((reponse)=>{
            this.setState({
                infos:response.body.Search,
                total:response.body.totalResults
            });
        });
    }

    render(){
        if(this.state.infos.length === 0)
          return false //return false when nothing is in the state
        var infos=_.map(this.state.infos, (info)=>{
            return <li>{info.title}</li>;
        });

        return(
        <div>
        <ul> {infos}</ul>

        </div>
        )
    }

}

使用react.js中的API渲染数据？

1 个答案: