javascript - 从 JSON ReactJS 中的 JSON 数组中获取值

Question

我正在尝试从 JSON 中获取如下所示的值：

{
    "id": 371,
    "city": "London",
    "name": "London Station",
    "trains": [
        {
            "id": 375,
            "number": "1023",
            "numberOfCarriages": "21"
        }
    ]
}

我想从火车中获取值，例如 number 和 numberOfCarriages。我正在尝试在 React 中获取这些值。我的反应代码：

class ViewTrainsComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            id: this.props.match.params.id,
            station: []
        }
    }


    render() {
        return (
            <div>
                        <div className="row">
                            {/* <div>{this.state.station[0].trains[0].number}</div> */}
                        </div>
            </div>
        );
    }
}

我做对了吗？如何在渲染函数中获取这些值？

编辑。

这是来自 API 的响应

标签： javascriptjsonreactjs

Answer 1

避免直接设置和更新状态

this.state = ...

除非您在构造函数中对其进行初始化。相反，使用setState( ) 函数或useState 钩子。

但我认为你的问题更多是关于如何在渲染函数中获取火车的值，你可以访问这些作为

render() {
    return <div>{this.state.stations[i].trains[j].number}</div>
  }

因此对于第一站的第一列火车 i=0 和 j=0 以及第一站的第二列火车 i=0 和 j=1。第二站的第一列火车 i=1 和 j=0 以及第一站的第二列火车 i=1 和 j=1。