如何以以下格式将项目添加到数组并将其显示在平面列表中？

Question

我正在尝试将项目添加到 redux 状态数组。我可以添加项目，但我的平面列表不显示它们。这很可能是因为它们像这样 ['abc-123, bcd-234'] 等而不是 [{license: abc-123}] 所以我可以在我的 flatlist 中调用 item.license 。我将如何为这些项目添加一个 id。我怎样才能稍微修复我的结构以获得 [{id: 0, license: 'abc-123'}] ?

这是我的动作文件：

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

export const addNewCar = (text) => ({
    type: ADD_NEW_CAR,
    payload: text
})

export const deleteExistingCar = (license) => ({
    type: DELETE_EXISTING_CAR,
    payload: license
})

这是我的减速器：

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

const initialState = {
  cars: [],
}

const carsListReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NEW_CAR:
      return {
        ...state,
        cars: [...state.cars, action.payload],
      }
    case DELETE_EXISTING_CAR:
        return {
            cars: [
                ...state.cars.filter(license => license !== action.payload)
            ]
        }
    default:
      return state
  }
}

export default carsListReducer

这是我的平面列表：

const totalCars = props.cars.length

          <FlatList
            style={{ marginTop: 0 }}
            data={cars}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => {
              return (
                <View style={licenseContainer}>
                  <View style={{ width: '20%' }}>
                    <Ionicons
                      style={carIcon}
                      name='car-outline'
                      size={30}
                      color={colors.black}
                    />
                  </View>
                  <View style={{ width: editing ? '60%' : '80%' }}>
                    <Text key={item.license} style={licenseText}>
                      {item.license}
                    </Text>
                  </View>
                  {editing ? (
                    <View style={{ width: '20%' }}>
                      <Ionicons
                        name='ios-close-circle-outline'
                        size={30}
                        color={colors.black}
                        style={removeIcon}
                        onPress={() => removeCar(item.license)}
                      />
                    </View>
                  ) : null}
                </View>
              )
            }}
            ItemSeparatorComponent={() => {
              return <View style={divider} />
            }}
          />

const mapStateToProps = (state) => ({
  signedIn: state.authReducer.signedIn,
  cars: state.cars
})

const mapDispatchToProps = (dispatch) => ({
  authActions: bindActionCreators(authAction, dispatch),
  addNewCar: text => dispatch(addNewCar(text)),
  deleteExistingCar: car => dispatch(deleteExistingCar(car))
})

export default connect(mapStateToProps, mapDispatchToProps)(ProfileScreen)

Answer 1

如果您的数组包含字符串值，那么不要使用 item.license，只需使用 item

<View style={{ width: editing ? '60%' : '80%' }}>
   <Text key={item} style={licenseText}>
     {item}
   </Text>
 </View>

如何以以下格式将项目添加到数组并将其显示在平面列表中？

How do I add items to array in following format and display it in flatlist?

react-native

redux