Javascript 在React中映射local.json数据

我有一个格式如下的local.json文件

    {
  "results": [
    {
      "id": 1,
      "title": "2 bedroom apartment to rent",
      "location": "30 South Colonnade London E14 5EZ",
      "description": "The building offers a communal lifestyle which consists of a large lounge area with dining room, working space, TV lounge, gym, stylish meeting rooms, free table tennis, free WIFI and a spacious communal roof terrace. Local transport includes Canning Town DLR and Jubilee Line (0.1 miles). Argo Apartments is managed by Grainger plc, one of the UK's leading professional landlords with over 100 years experience.",
      "price": "1,800",
      "beds": 2,
      "bathrooms": 1,
      "landlord": "Hamptons International Lettings",
      "images": ["image1", "image2"]
    },
    {
      "id": 2,
      "title": "2 bedroom flat to rent",
      "location": "Textile Building, Chatham Place, Hackney, London, E9",
      "description": "SHORT LET - Forming part of the new eagerly awaited Textile Building in Hackney Central E8, this stunning two double bedroom property has been finished to the highest standard, featuring two modern fitted bathrooms (one en-suite), two equal double bedrooms, spacious open plan reception with brand new integrated kitchen, exposed brickwork and communal underground bike storage.",
      "price": "2,400",
      "beds": 2,
      "bathrooms": 1,
      "landlord": "Stirling Ackroyd, Hackney",
      "images": ["image1", "image2"]
    },
    {
      "id": 3,
      "title": "3 bedroom apartment to rent",
      "location": "Sixth Floor Tower Building 11 York Road London SE1 7NX",
      "description": "A fantastic three bedroom apartment set in this popular development close to Vauxhall and Stockwell tube stations. The apartment is neutrally decorated throughout and is available either furnished or unfurnished. Residents will enjoy the plethora of shops, bars and restaurants and leisure activities in this popular part of London as well as the excellent commuter links towards Central London.",
      "price": "2,050",
      "beds": 3,
      "bathrooms": 2,
      "landlord": "Regent Letting and Property Management",
      "images": ["image1", "image2"]
    }
  ],
  "newResults" : [
      {
      "id": 4,
      "title": "2 bedroom flat to rent",
      "location": "Conway Street, Fitzrovia, W1T",
      "description": "Complete is delighted to market this newly renovated period property situated on the corner of Fitzroy Square in the heart of Fitzrovia, W1. The property is located on the ground floor and comes with 2 double bedrooms, shower room, open plan living and kitchen area. The kitchen is fully fitted with Siemens appliances and Duravit fittings in the bathroom. This apartment has high ceiling and retains its original period features. Located on the corner of this garden square this development was built in the 18th Century and benefits from being in the heart of vibrant London whilst also being a quiet residential area.",
      "price": "1,500",
      "beds": 2,
      "bathrooms": 1,
      "landlord": "Barnard Marcus Lettings",
      "images": ["image1", "image2"]
    }  
  ]
}

我希望能够调用映射到组件的相关信息，如下所示

class ResultsLists extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      results: resultsData
    }
  }

  render() {
    const results = this.state.results.results.map((result) =>
      <li>{result}</li>
    );

    return (
      <div className="rst-List">
        <ul className="rst-List_Items">
          {results}
        </ul>
      </div>
    )
  }
}

类结果列表扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
结果：resultsData
}
}
render（）{
const results=this.state.results.results.map（（结果）=>
{result}
);
返回(

{results}

)
}
}

---

我似乎不能让它太工作，我得到的错误-对象作为一个孩子是无效的。关于这不起作用的原因，似乎有各种各样的原因，想知道是否有人可以检查是否正常。

您正在映射

结果

，但随后将整个

结果

对象放入JSX

这是一个如何映射数据的示例：

const someData = [{ name: "Colin" }, { name: "Ricardo" }];

const App = () => {
  const temp = someData.map(o => <li>{o.name}</li>);

  return (
    <div>
      <ul>{temp}</ul>
    </div>
  );
};

---

当您使用console.log results时，您会得到什么？因此，您不能只显示所有数据，它需要显示该集合的特定部分。明白了，谢谢你。您需要为所有数据添加多个

。如果有帮助，请将投票/标记为正确：）

const results = this.state.results.results.map((result) =>
  <li>{result.title}</li>
);