對數組中的本機 useState 模型做出反應

Question

我有一個 model 如下所述，我有與這個 model 相關的數據，我想打印它們作為比較結果。 但我不知道該怎么做。 我是 React Native 的新手。

模型.js

export class Category {
  id: String;
  name: String;
  src: String;
  subCategories: String[];

  constructor(id: String, name: String, src: String, subCategories: String[]) {
    this.id = id;
    this.name = name;
    this.src = src;
    this.subCategories = subCategories;
  }
}

數據.js

export default [
{
        id: "1",
        name: "Tea",
        src: "https://cdn.domain.com/cat/551438_1619242670038.jpeg",
        subCategories: ["Bar"]

    }
    , {
        id: "2",
        name: "Dream",
        src: "https://cdn.domain.com/cat/551438_1619242670038.jpeg",
        subCategories: ["Hello", "Cat",]

    },
];

應用程序.js

import Category from './models';
import CategoryData from './data';

function MainCategory() {
const [categories, setCategories] = useState();
return (
    <View>
      <View>
        {categories.map((item) => (
         
        ))}
      </View>
    </View>
  );
}

Answer 1

首先像這樣在 data.js 中聲明您的 CategoryData。

 export default CategoryData = [ { id: "1", name: "Tea", src: "https://cdn.domain.com/cat/551438_1619242670038.jpeg", subCategories: ["Bar"] }, { id: "2", name: "Dream", src: "https://cdn.domain.com/cat/551438_1619242670038.jpeg", subCategories: ["Hello", "Cat",] }, ];

在 app.js 中，你只需要像這樣初始化你的類別 state。

 import Category from './models'; import CategoryData from './data'; function MainCategory() { const [categories, setCategories] = useState(CategoryData); return ( <View> <View> {categories.map((item) => ( ))} </View> </View> ); }