如何为范围外声明的变量赋值

Question

我需要将axios调用中的值分配给它之外的变量。我使用react。

 var starthaltname="sdsdsd";

 Axios.get('http://localhost:9090/route/getHalt?routeId=3').then(function (starthalt) {
      console.log(starthalt.data.name);
      return starthalt.data;
}.bind(this));

我可以控制台记录我想要的输出，但是当分配给“ starthaltname”变量时，该变量仍具有未定义的值。有什么建议吗？

这是代码的整个呈现部分。我想要的是填充表中的值。

render() {

        let table;
        let starthaltname;
        let endhaltname;
        let startdate;
        let starttime;
        let endtime;

        if (this.state.journeylist.length !== 0) {
            console.log("data available");
            console.log(this.state.journeylist.length);

            table = (
                <table className="table table-hover table-active">
                    <tbody>
                        {this.state.journeylist.map((journey, j) => {
                            console.log(journey);

                            var starthaltname="sdsdsd";

                            Axios.get('http://localhost:9090/route/getHalt?routeId='+journey.busroute+'&haltIndex='+journey.jstartloc).then(function (starthalt) {
                                console.log(starthalt.data);
                                console.log(starthalt.data.name);
                                return starthalt.data;
                            }.bind(this)).then(function(starthaltresponse){
                                Axios.get('http://localhost:9090/route/getHalt?routeId='+journey.busroute+'&haltIndex='+journey.jendloc).then(function (endhalt) {
                                    console.log(endhalt.data);
                                    endhaltname=endhalt.data.name;
                                    return endhalt.data;
                                }.bind(this)).then(function(endhaltresponse){
                                    var  sdate =  new Date(journey.jstarttime);                            
                                    startdate = sdate.toDateString();
                                    starttime = sdate.toLocaleTimeString();
                                    var  edate =  new Date(journey.jendtime);                            
                                    endtime = edate.toLocaleTimeString();
                                    console.log(starttime);
                                }.bind(this));
                            }.bind(this));
                            console.log(starthaltname);
                            return (
                                <tr key={j}>
                                    <td className="text-left" id={journey.journeyId} data-toggle="modal" data-target="#viewTicketModal" >{
                                        <div>
                                            <p className="font-weight-bold text-dark">{startdate}</p>
                                            <hr />
                                            <ul>
                                                <li className="listFrom text-success">{starthaltname}</li>
                                                <p className="lbltime font-italic">{starttime}</p>
                                            </ul>
                                            <ul>
                                                <li className="listFrom text-active">{endhaltname}</li>
                                                <p className="lbltime font-italic">{endtime}</p>
                                            </ul>
                                            <div className="text-right bg-secondary">
                                                <p className="lbljfare text-white">Rs. {journey.jfare}</p>
                                            </div>
                                        </div>
                                    }
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            );
        }
        else {
            table = "No data available";
        }


        return (
            <div>
                {table}
            </div>
        );


    }

Answer 1

在状态finalJournyList中添加另一个属性，该属性将包含请求结果并使用空数组进行初始化。

state = {
finalJournyList: []

}

componentDidMount() {
const { journeylist } = this.state;
const requestPromises = journeylist.map(async (journey, i) => {
    const { data: { name: starthaltname } } = await Axios.get('http://localhost:9090/route/getHalt?routeId=' + journey.busroute + '&haltIndex=' + journey.jstartloc);
    const { data: { name: endhaltname } } = await Axios.get('http://localhost:9090/route/getHalt?routeId=' + journey.busroute + '&haltIndex=' + journey.jendloc);
    const sdate = new Date(journey.jstarttime);
    const edate = new Date(journey.jendtime);
    return Promise.resolve({
        starthaltname,
        endhaltname,
        startdate: sdate.toDateString(),
        starttime: sdate.toLocaleTimeString(),
        endtime: edate.toLocaleTimeString(),
        jfare: journey.jfare,
        journeyId: journey.journeyId
    });
});

Promise.all(requestPromises)
    .then((result) => this.setSate({ finalJournyList: result }))
}

render() {
const { journeylist, finalJournyList } = this.state;
if (!finalJournyList.length) {
    return <div>No data available</div>;
}
return <table className="table table-hover table-active">
    <tbody>
        {this.state.finalJournyList.map((journey, j) => {
            return (
                <tr key={j}>
                    <td className="text-left" id={journey.journeyId} data-toggle="modal" data-target="#viewTicketModal" >
                        <div>
                            <p className="font-weight-bold text-dark">{journey.startdate}</p>
                            <hr />
                            <ul>
                                <li className="listFrom text-success">{journey.starthaltname}</li>
                                <p className="lbltime font-italic">{journey.starttime}</p>
                            </ul>
                            <ul>
                                <li className="listFrom text-active">{journey.endhaltname}</li>
                                <p className="lbltime font-italic">{journey.endtime}</p>
                            </ul>
                            <div className="text-right bg-secondary">
                                <p className="lbljfare text-white">Rs. {journey.jfare}</p>
                            </div>
                        </div>                        
                    </td>
                </tr>
            );
        })}
    </tbody>
</table>
}