首页 > 解决方案 > 如何映射 ListIem 响应值

问题描述

我有个问题。现在我有 API 来获取列表项,然后渲染它。但响应值不明确,例如 item.step_status 值为 S、RJ、F。问题是我需要映射它,例如 S 表示成功,F 表示失败,RJ 表示拒绝。

subtitle={ Status: ${item.step_status}} << 这是我需要更新的部分,现在值仍然是 S、F 和 RJ 需要像我上面提到的那样映射它。

<FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              leftAvatar={{ title: item.step_status }}
              title={`${item.user_id} reason: ${item.leave_details}`}
              subtitle={`Status: ${item.step_status}`}
              onPress={() => {
                Alert.alert(
                  'Authorization for :',
                  `${item.user_id} reason: ${item.leave_details}`,
                  [
                    {
                      text: 'Cancel',
                      onPress: () => console.log('Cancel'),
                      style: 'cancel',
                    },
                    {
                      text: 'Reject',
                      onPress: () => this.dayoffProcess(item.id, 'RJ'),
                    },
                    {
                      text: 'Approve',
                      onPress: () => this.dayoffProcess(item.id, 'AP'),
                    },
                  ],
                  { cancelable: false },
                );
              }}
            />
          )}
          keyExtractor={item => item.id.toString()}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />

映射它的简单方法是什么?

之前谢谢

标签: javascriptreact-native

解决方案


在阅读了一些文章后,我可以使用三元运算符来解决它。

以下是更改/示例:

  subtitle={
                <View>
                  {item.step_status == 'S' ? <Text>Status : Success</Text>
                    : item.step_status == 'AP' ? <Text>Status : Approved</Text>
                      : item.step_status == 'RJ' ? <Text>Status : Rejected</Text> : null}
                </View>
              }

结案。


推荐阅读