>source

나는 잠시 반응을 습득하고, 사용자가 아이템을 추가하고 제거 할 수있는 음식 목록에서 일하고 있습니다.플랫리스트, 지금까지는 완벽하게 작동하는 항목을 추가하는 데 효과가있었습니다. 이제는 글로벌 상태에서 항목을 제거하기 위해 동일한 접근법을 사용하고 있습니다.식품 목록, 나는 사용한다깜박 거림기능을 시작합니다createtwobuttonalert.그리고 거기에서 출시removeFromFoodlist다이어트화면. code를 실행하면 앞에서 아무 일도 일어나지 않아도됩니다. 단말기가 아닌 아무 일도 일어나지 않아도 이전에 일어나지 않은 메소드를 사용하고 있지 않은 메소드를 사용하고 있지 않은 메소드를 사용하고 있습니다. 당신의 도움을 주셔서 감사합니다.

다이어트

class Diet extends Component {
createTwoButtonAlert= (item)=>Alert.alert(
  "Delete Food",
  "Are you sure to delete this food?",
  [
    {
      text: "Cancel",
      style: "cancel"
    },
    { text: "Delete",
      onPress: ()=> this.props.removeFromFoodList(item)
    }
  ]
);
 render() {
       return (
                     <FlatList
                      data={this.props.foodList}
                      renderItem={({item})=> (
                        <View>                          <TouchableOpacity
                            onLongPress={()=> this.createTwoButtonAlert(item)}
                          >                            <Text>{item.foodName}</Text>                              <Text>                                {item.calories}
                              </Text>                              <MaterialIcons name="arrow-forward-ios" />                          </TouchableOpacity>                          </View>                      )}
                      keyExtractor={item=> item.foodId}
                    />}
}
function mapStateToProps(store){
  return{
      foodList: store.userState.foodList
  };
}
const mapDispatchToProps= { removeFromFoodList };
export default connect(mapStateToProps, mapDispatchToProps)(Diet);

색인

import {  ADD_FOOD, REMOVE_FOOD } from "../constants/index";
export const updateFoodList= (foodList)=> {
  return { type: ADD_FOOD, payload: foodList}
}
export const removeFromFoodList= (item)=> {
  return { type: REMOVE_FOOD, payload: item.foodId}
}

감속기

import { ADD_FOOD, REMOVE_FOOD } from "../constants";
const initialState= {
  foodList: [],
};
export const user= (state= initialState, action)=> {
  switch (action.type){
      case ADD_FOOD:
      return{
        ...state,
        foodList: [...action.payload],
      }
      case REMOVE_FOOD:
      return{
        ...state,
        foodList: [...state.foodList.filter((item)=> item.foodId != action.foodId)],
      }
      default:
        return state
  }
};

배열 예

Array [
  Object {
    "calories": "120",
    "foodId": 0.8845240802796346,
    "foodName": "Rice",
  },
]

  • 답변 # 1

    을 사용해야합니다

    foodList: [...state.foodList.filter((item)=> item.foodId != action.payload)]
    

    고맙습니다

    Salvo2021-07-21 11:12:11

    @salvo를 환영합니다

    Alan Omar2021-07-21 11:17:55
  • 이전 Java CompletableFuture : 여러 개의 완성품을 병렬화하는 방법
  • 다음 java : Spring Boot App에서 Azure에 배포 된 Spring Boot App 내에서 예약 된 작업 실행