Question

您能帮我吗，我正在努力解决这个问题将新数据添加到数据库时，有什么方法可以更新平面列表我正在使用redux

有人可以帮忙吗？从componentDidMount中，我从redux动作中调用了该函数，所以我得到的数据是第一个渲染

这是我的带有redux动作和reducer的代码代码示例


  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;
    }
}

Answer 1

componentDidMount仅被调用一次，因此道具没有被更新。

因此，您需要更新componentDidUpdate中的道具。尝试这样的事情：-

尝试如下：

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

    this.props.Orders();
  }
}

查看此链接：- componentDidUpdate

Answer 2

尝试将拉动刷新功能添加到您的Flatlist。 Check this

<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()
};

Answer 3

更新数据时，在平面列表中发送参数并在extraData中进行设置。这样的示例：

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

我认为这会对您有所帮助。

将新数据添加到数据库时反应本机更新平面列表

3 个答案: