реагировать на собственный список обновлений при добавлении новых данных в базу данных - PullRequest
Новая
       27

реагировать на собственный список обновлений при добавлении новых данных в базу данных

0 голосов
/ 11 декабря 2019

Можете ли вы помочь мне, пожалуйста, я борюсь с этой проблемой, есть ли способ обновить плоский список, когда новые данные добавляются в базу данных, я использую приставку

Может кто-нибудь помочь? из componentDidMount я вызываю функцию из действия приведения, чтобы получить данные, это первый рендер

это мой код с действием приведения и образец кода редуктора 


  componentDidMount() {this.props.Orders()}

  render() {

    {
      this.props.data != null ? <FlatList
        style={{ flex: 1 }}
        data={this.props.data.orders}
        renderItem={this._renderListItem}
        initialNumToRender={50}
        keyExtractor={item => (item.order.id).toString()}
      /> : null
    }


    );
  }
}


const mapStateToProps = state => {
  return {
    error: state.orders.error,
    loading: state.orders.loading,
    data: state.orders.data
  }
}
export default connect(mapStateToProps, { Orders })(Pending);```


i try to use 
 extraData={this.props.data.orders}
 extraData={this.props}
 extraData={this.state}

nothing is working 

//action where i call the api

export const Orders = () => {
    return (dispatch) => {
        dispatch({ type: ORDERS_ATTEMPT });

        axios({
            url: '**',
            method: 'POST',
            //data: data,
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',

            }
        })
            .then(resp => handleResponse(dispatch, resp.data))
            .catch(error => console.error(error));

    };
}

// rducer

import {
    ORDERS_ATTEMPT,
    ORDERS_SUCCESS,
    ORDERS_FAILED
} from '../actions/types';

const INITIAL_STATE = { data: null, loading: false, error: '', }

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case ORDERS_ATTEMPT:
            return { ...INITIAL_STATE, loading: true }
        case ORDERS_FAILED:
            return { ...INITIAL_STATE, loading: false, error: action.error }
        case ORDERS_SUCCESS:
            return { ...INITIAL_STATE, loading: false, data: action.data }
        default:
            return state;
    }
}

Ответы [ 3 ]

0 голосов
/ 11 декабря 2019

Попробуйте добавить функцию подтягивания для обновления вашего Flatlist. Проверьте это 

<FlatList
    data={this.props.data.orders}
    renderItem={this._renderListItem}
    initialNumToRender={50}
    keyExtractor={item => (item.order.id).toString()}
    refreshing={this.props.loading}
    onRefresh={this.handleRefresh}
/>

Внутри функции handleRefresh вызовите this.props.Orders () для получения данных. 

handleRefresh = () => {
    this.props.Orders()
};
0 голосов
/ 11 декабря 2019

При обновлении данных отправьте параметр в плоский список и установите его в extraData. Пример, подобный этому: 

<FlatList
                {...this.props}
                data={itemList}
                extraData={update}
                renderItem={({ item, index }) =>
                   <View></View>
                }
            />

Я думаю, что это поможет вам.

0 голосов
/ 11 декабря 2019

componentDidMount вызывается только один раз, поэтому реквизиты не обновляются.

Итак, вам необходимо обновить реквизиты в componentDidUpdate. Попробуйте что-то вроде этого: -

попробуйте, как показано ниже: 

componentDidUpdate(prevProps) {
  if(!equal(this.props, prevProps))
In your flatlist put 
  {

    this.props.Orders();
  }
}

Проверьте эту ссылку: - componentDidUpdate

...