将新数据添加到数据库时对本机更新平面列表做出反应答案

【问题标题】：react native update flatlist when new data is added to database将新数据添加到数据库时对本机更新平面列表做出反应
【发布时间】：2019-12-11 07:23:16
【问题描述】：

你能帮我吗？我正在为这个问题苦苦挣扎将新数据添加到数据库时，有什么方法可以更新平面列表我正在使用 redux

有人可以帮忙吗？从 componentDidMount 我从 redux 操作调用函数，所以我得到数据这是第一次渲染

这是我的带有 redux action 和 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;
    }
}

【问题讨论】：

当你更新道具时，它会自动更新视图。你能显示你在哪里更新你的数据吗？请记住，每次更新数据时都必须返回新数组。

标签： reactjs react-native redux react-native-flatlist

【解决方案1】：

尝试将拉动刷新功能添加到您的平面列表。 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()
};

【讨论】：

【解决方案2】：

当数据更新时，在 flatlist 中发送一个参数并在 extraData 中设置。像这样的例子：

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

我想这会对你有所帮助。

【讨论】：

【解决方案3】：

componentDidMount 只被调用一次，因此 props 没有被更新。

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

尝试如下：

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

    this.props.Orders();
  }
}

查看此链接：- componentDidUpdate

【讨论】：

我尝试使用您的解决方案 componentDidUpdate(prevProps) { if (this.props.data !== prevProps.data) { this.props.Orders(); } } 但是 flaltlis 不断刷新我不知道为什么每次我调用该函数时数据返回 null 然后 componentDidUpdate 继续工作并继续获取数据
你是否需要强制使用 flatlist，因为你也可以使用 ScrollView 来实现同样的效果
如果你想要一个例子，请告诉我