React Native component is not rerendering-CodePudding

I have a problem somehow my UI is not rerendering after changing the state inside of the functional component, maybe I miss something but it should change when you change STATE or PROPS, maybe it's because the state is passed to another component?

react - 16.13.1

react-native - 63 ( expo 42 )

    const OrderMockData = [
        {id: "1"},
    ];
    const OrdersMockData = [
        {id: "1"},
        {id: "1"},
    ]


    const OrderListScreen = () => {

       const [ordersState, setOrdersState] = useState(OrdersMockData);

       const renderButtonSheet = () => {
            return(<TouchableOpacity onPress={() => {
                                                console.log('changed data')
                                                setOrdersState(OrderMockData)
                                            }}>
                                                <Text>rerender</Text>
                                            </TouchableOpacity>)
       }

        return (<><PseudoElement data={ordersState} /> {renderButtonSheet()}</>);
     }

maybe problem part is inside "PseudoElement" itself cuz it has "useReducer" hook where is passed State from"OrderListScreen" component

    const [state, dispatch] = useReducer<Reducer<State<T>, Action<T>>>(
        listReducer,
        {
          listItems: data, // THIS ARE DATA passed true "PSEUDOELEMENT"
          isFetching: false,
          page: 1,
        }
      );

    function listReducer<T>(state: State<T>, action: Action<T>) {
      switch (action.type) {
        case 'IS_FETCHING':
          return {
            ...state,
            isFetching: action.payload,
          };
        case 'SET_PAGE':
          return {
            ...state,
            page: state.page   action.payload,
          };
        case 'SET_ITEMS':
          return {
            ...state,
            listItems: [...state.listItems, ...action.payload.items],
            isFetching: action.payload.isFetching,
          };
        default:
          return state;
      }
    }

CodePudding user response：

In return, you need to have one parent tag.So you can use View as a parent tag.

    const OrderMockData = [
        {id: "1"},
    ];
    const OrdersMockData = [
        {id: "1"},
        {id: "1"},
    ]


    const OrderListScreen = () => {

       const [ordersState, setOrdersState] = useState(OrdersMockData);

       const renderButtonSheet = () => {
            return(<TouchableOpacity onPress={() => {
                                                console.log('changed data')
                                                setOrdersState(OrderMockData)
                                            }}>
                                                <Text>rerender</Text>
                                            </TouchableOpacity>)
       }

        return (<View>
                   <PseudoElement data={ordersState} /> 
                   <View>{renderButtonSheet()}</View>
                </View>);
     }

CodePudding user response：

First, try it without the calling function and add all rendering inside return.

  return (<><PseudoElement data={ordersState} />
            <TouchableOpacity onPress={() => {
                                            console.log('changed data')
                                            setOrdersState(OrderMockData)
                                        }}>
                                            <Text>rerender</Text>
            </TouchableOpacity>
         </>);

If it is working. Then you can pass orderMockdata to function instead direct use it inside external function

CodePudding user response：

problem was reducer deep inside component ...