Javascript 有条件地更改数组值的图标

下面是我调用和显示帖子的简单代码

/// My API Data Call ///
getPosts() {
    axios
      .get("myAPIDATA")
      .then(response => {
        this.setState({
          posts: response.data.response
        });
      });
  }

// Displays data from API call successfully //
{this.state.posts.map((post, index)=> {
        return (
         <View key={index}>
          <Text>
            {post.category},
            {post.content}
          </Text>
         </View>
        )
      })}

///我的API数据调用///
getPosts（）{
axios
.get（“myAPIDATA”）
。然后（响应=>{
这是我的国家({
帖子：response.data.response
});
});
}
//成功显示来自API调用的数据//
{this.state.posts.map（（post，index）=>{
返回(
{邮政类别}，
{post.content}
)
})}

---

我有4个类别，文章可以归为后。类别：A，B，C，D。如果文章类别是“A”，我想显示一个特定的图标，如果类别是“B”，我想显示一个不同的图标。在我的代码中，我将在什么时候定义条件图标？在getPosts或posts.map期间？

在

post.map

期间，您可以尝试以下操作：

const ICONS = {
  A: "icon-a",
  B: "icon-b",
  C: "icon-c",
  D: "icon-d"
};

// Displays data from API call successfully //
{
  this.state.posts.map(post => {
    return (
      <View key={post.id}>
        <Text>
          {post.category},{post.content}
        </Text>
        <Icon type={ICONS[post.category]} />
      </View>
    );
  });
}

const图标={
A:“图标A”，
B:“图标B”，
C:“图标-C”，
D:“图标-D”
};
//成功显示来自API调用的数据//
{
this.state.posts.map（post=>{
返回(
{post.category}，{post.content}
);
});
}

映射代码可能在组件的

render（）方法中？请包括完整性。最直接的方法是定义一个名为
iconformcategory
的方法/函数，该方法/函数接受一个类别并返回相应的图标组件（一个
switch
语句或一个对象映射）。