代码之家 › 专栏 › 技术社区 › dragi

如何在react中读取嵌套的JSON?

reactjs json

dragi · 技术社区 · 6 年前

有一段时间我一直在寻找一个好答案,但找不到任何答案。所以我有一个问题,我有一个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,
};

我可以将这些映射到一个列表中,但我没有办法知道它们是什么。有没有办法保存它们?

我希望这是有道理的…

谢谢!

4 回复 | 直到 6 年前

Solo 6 年前

我想我理解这个问题。

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

如果您迭代它们,就已经知道了类型。

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} />;
})

XPowerDev 6 年前

你可以使用

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

weibenfalk 6 年前

我承认你的问题不完全理解。=)您的状态属性中有猫或狗的类型。例如,如果你在狗阵列上绘制地图,你就知道这是你要绘制的狗。如果你的意思是你想以某种方式在你的列表中显示如果它是猫或狗,你可以把它添加到你的列表中,例如这样:

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

misraX 6 年前

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。

推荐文章