如何在 React 中读取嵌套的 JSON？答案

【问题标题】：How to read a nested JSON in React?如何在 React 中读取嵌套的 JSON？
【发布时间】：2018-11-27 18:21:36
【问题描述】：

我一直在寻找一个好的答案，但找不到任何答案。所以我遇到了这个问题，我有一个 JSON 文件，我想在 React 中从中读取数据。

JSON 看起来有点像这样：

{
"cats": [
    {
        "id": 1,
        "name": "Cat1",
        "age": 3
    },
    {
        "id": 2,
        "name": "Cat2",
        "age": 2
    }
],
"dogs": [
    {
        "id": 3,
        "name": "Dog1",
        "age": 5
    },
    {
        "id": 4,
        "name": "Dog2",
        "age": 2
    }
]
}

如何将这个 JSON 读入反应状态，以便我可以拥有所有的猫和狗以及它们的所有数据，但我总能分辨出它是猫还是狗？

所以现在我有两种不同的状态：

this.state = {
  cats: data.cats,
  dogs: data.dogs,
};

我可以将它们映射到一个列表中，但我无法分辨它们是什么。有没有办法保持它们的本来面目？

我希望这是有道理的......

谢谢！

【问题讨论】：

列表名称 name 将始终告诉您是在狗列表还是猫列表中搜索。
尝试首先处理数据，并在每个 JSON 对象中添加一个 type :"dog|cat"，然后将每个数组连接到一个单独的数组中。这应该工作

标签： json reactjs

【解决方案1】：

我想我明白了这个问题..

项目如何知道它是什么类型？

如果你迭代它们，你已经知道类型了。

this.state.dogs.map((dog, i) => {
  // I know this is dog
  return <Item key={i} {...dog} />;
})

this.state.cats.map((cat, i) => {
  // I know this is cat 
  return <Item key={i} {...cat} />;
})

在组件内部？使用单独的组件，然后您就知道哪个是哪个。

this.state.dogs.map((dog, i) => {
  return <DogItem key={i} {...dog} />;
})

this.state.cats.map((cat, i) => {
  return <CatItem key={i} {...cat} />;
})

你在重用组件吗？将类型作为属性传递。

this.state.dogs.map((dog, i) => {
  return <Item key={i} type="dog" {...dog} />;
})

this.state.cats.map((cat, i) => {
  return <Item key={i} type="cat" {...cat} />;
})

【讨论】：

【解决方案2】：

你可以使用

this.setState({
cats: data.cats,
dogs: data.dogs
})

【讨论】：

【解决方案3】：

我承认不完全理解你的问题。 =) 您的状态属性中有猫或狗的类型。因此，例如，如果您在 dog 数组上进行映射，您就会知道这是您映射的狗。如果你的意思是你想以某种方式显示在你的列表中，如果它是一只猫或一只狗，你可以将它添加到你的列表中，例如：

this.state.dogs.map( (dog, i) => return <li key={i}>Dog: {dog.name}</li>)

【讨论】：

基本上，当我列出项目时，我会得到 id、name 和 age 值，但是当我尝试将此项目传递给另一个组件时，我无法判断它是猫还是狗，因为我那里只有身份证、姓名和年龄。这有意义吗？

【解决方案4】：

class Draw extends React.Component {
 static defaultProps {
 dogs: data.dogs,
 cats: data.cats
  }

 render(){
   const {dogs, cats} = this.props;
   return(<div>{dogs.map((value, index)=>value.id)}</div>)
  }
 }

value.id 可以是 value.name 或任何你想要的嵌套 html。

【讨论】：