Question

一段时间以来，我一直在寻找一个好的答案，但找不到任何答案。所以我在有一个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读取为反应状态，以便可以拥有所有的猫狗和它们的所有数据，但是我总能分辨出它是猫还是狗？

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

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

我可以将它们映射到列表中，但是我没有办法告诉他们它们是什么。有没有办法保持它们的原样？

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

谢谢！

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

Answer 2

您可以使用

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

Answer 3

我不完全理解你的问题。 =）您的州属性中具有猫或狗的类型。因此，例如，如果您在dog数组上进行映射，您就会知道它是您映射所通过的dog。如果您的意思是想以某种方式在列表中显示它是猫还是狗，则可以将其添加到列表中，例如：

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

Answer 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。

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

4 个答案: