javascript - 获取嵌套在 json 中的数组的值，并按每个 id -react 显示数组元素

Question

我有一个这样的对象数组。

var matchingJobs = [
        {
            jobCode: "J-1234",
            jobType: "Basic",
            Country: "US",
            locations: ["7300", "1700", "1000"]
        },
        {
            jobCode: "J-2232",
            jobType: "Travel",
            Country: "CA",
            locations: ["7300", "1700"]
        },
        {
            jobCode: "J-7002",
            jobType: "Basic",
            Country: "AU",
            locations: ["7300", "1000"]
        },
        {
            jobCode: "J-6749",
            jobType: "Travel",
            Country: "US",
            locations: ["7300", "1700", "1000"]
        }
    ];

我想按每个工作代码显示位置元素。在这里，我正在尝试渲染元素并返回数组数据，但出现错误。如何显示每个作业代码的位置数组元素。

使成为

render() {
  const { matchingJobs } = this.props;

  return (
    <div className ="col-xs-12 col-sm-2 col-md-2 col-lg-2 jobSearchName jobSearchColumn">
      <div className="configLocationList">
         <h6>{matchingJobs.map((info,i)=><span key={i}>({info.locations.map((obj,index)=><span key={index}>{obj}</span>)})</span>)}</h6></div></div>
  )
}

如何在地图函数中映射请告诉我。

标签： javascriptreactjs

Answer 1

我已经更新了render显示记录的方法。

render() {
    const { matchingJobs } = this.props;

    return (
      <div className ="col-xs-12 col-sm-2 col-md-2 col-lg-2 jobSearchName jobSearchColumn">
        <div className="configLocationList">
          {matchingJobs.map((info,i)=>
          <div key={i} style={{margin: 10}}>
            Job Code: {info.jobCode}<br/>
            Location: ({info.locations.join(", ")})
          </div>)}         
        </div>
      </div>
    )
  }

我使用join了用逗号分隔的方法来显示位置。

这是为您提供的工作演示
https://stackblitz.com/edit/react-j5pzn3

您的页面将显示如下。