0

我从产品更改金额。所以在输入字段中必须有新的金额。我在 redux 中 console.log 状态并且状态已成功更改。所以在 recyclerlistview 我有一个 const 命名的数量。所以数量是变化的，并且在商店里是安全的，但我也在我的 recyclerlistview 中看到了旧状态。为什么 ？

我控制台记录了 recyclerlistview 中的数据道具，我还看到 console.log 中可能有新的变化，但它没有显示在 textinput 字段中（amount.toString()）

简短而甜蜜：我的 TextInput 未在 recyclerlistview 中显示新结果

Shopping_cart（切片）

import { createSlice } from "@reduxjs/toolkit";

const shopping_cart = createSlice({
    name: 'shopping_cart',
    initialState: {
      cart: []
    },
    reducers: {
      addCart(state, action) {
        state.cart.push(action.payload);
      },
      removeCart(state, action) {
        state.cart = [];
      },
      addAmountOnCartItem(state, action) {
     console.log(action.payload.product_id);
        state.cart = state.cart.map(el => {
          console.log(el.item.product_id);
          if(el.item.product_id === action.payload.product_id) {
            return {
              ...el,
              item: {
                ...el.item,
                amount: parseInt(action.payload.value)
              }
            }
          } else {
            return {
              ...el
            }
          }
        });
        console.log(state.cart);
      }
    }
});

export const { addCart, removeCart, addAmountOnCartItem } = shopping_cart.actions;
export default shopping_cart.reducer;

Shopping_cart.js（组件）

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, Dimensions } from 'react-native';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { AntDesign } from '@expo/vector-icons';
import { addCart } from '../redux/slice/product/shopping_cart';
import Shopping_cart_list from '../components/RecyclerListView/ShoppingCart/shopping_cart_list';
import ButtonWithoutLoader from '../components/ButtonWithoutLoader';
import faker from 'faker';

const { width } = Dimensions.get('window');

const Shopping_cart = () => {
  const dispatch = useDispatch();
  const ShoppingCartData = useSelector(state => state.shopping_cart.cart);

  if(ShoppingCartData.length > 0) {
    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Shopping_cart_list data={ShoppingCartData} />
      </View>
    )
  }
};

...styles

回收者列表视图

import React, { useState, useEffect, forwardRef, memo } from 'react';
import { StyleSheet, Text, TextInput, View, TouchableOpacity, Image, Dimensions } from 'react-native';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { RecyclerListView, LayoutProvider, DataProvider } from 'recyclerlistview';
import { useSelector, useDispatch } from 'react-redux';
import { AntDesign } from '@expo/vector-icons';
import { addAmountOnCartItem } from '../../../redux/slice/product/shopping_cart';
import faker from 'faker';
import ButtonWithoutLoader from '../../ButtonWithoutLoader';

const { width, height } = Dimensions.get('window');

const Shopping_cart_list = ({ data }) => {
  const dispatch = useDispatch();
  console.log('DATA');
  console.log(data);

  const cart = useSelector(state => state.shopping_cart.cart);

  const [update, updateRecycler] = useState(false);
  const [dataProvider, setDataProvider] = useState(new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(data));

  const handleChange = (e, product_id) => {
    dispatch(addAmountOnCartItem({ value: e, product_id }));
    updateRecycler(prevState => !prevState);
  };

  const [layoutProvider, setLayoutProvider] = useState(
    new LayoutProvider((i) => {
      return dataProvider.getDataForIndex(i).type;
    }, (type, dim) => {
      switch(type) {
        case 'NORMAL':
          dim.height = 250;
          dim.width = width * 0.9;
        break;
        default:
          dim.height = 0;
          dim.width = 0;
        break;
      }
    })
  );

  const rowRenderer = (type, data) => {
    const { product_id, product_name, price, product_image, amount, username } = data.item;
    console.log(amount);
    return (
      <TouchableWithoutFeedback style={{height: 250, backgroundColor: '#fff'}}>
        <View style={styles.mainContainer}>
          <View>
            <Text style={styles.text}>{product_name}</Text>
            <Text style={styles.text}>Preis: {price}</Text>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text style={styles.text}>Anzahl: </Text>
              <AntDesign name="minussquareo" style={{marginRight: 6}} size={24} color="black" />
              <TextInput value={amount.toString()} onChangeText={e => handleChange(e, product_id)} style={{height: 28, width: 28, borderRadius: 4, textAlign: 'center', backgroundColor: '#eee'}} />
              <AntDesign name="plussquareo" style={{marginLeft: 6}} size={24} color="black" />
            </View>
          </View>
        </View>
        <View style={[styles.header, { marginTop: 4 }]}>
          <ButtonWithoutLoader title="Jetzt Kaufen!" width={width * 0.9} />
        </View>
      </TouchableWithoutFeedback>
    )
  };

  return (
    <View style={{flex: 1}}>
      <RecyclerListView
        dataProvider={dataProvider}
        layoutProvider={layoutProvider}
        rowRenderer={rowRenderer}
        style={{marginLeft: width * 0.05, marginRight: width * 0.05}}
        extendedState={update}
        scrollViewProps={{showsVerticalScrollIndicator: false}}
      />
    </View>
  )
};

...styles
export....
4

0 回答 0