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

Question

你能帮我吗，我正在为这个问题而苦苦挣扎 当新数据添加到数据库时，有没有办法更新平面列表 我正在使用 Redux

谁能帮忙？ 从组件DidMount我从redux操作调用函数，所以我得到数据这是第一个渲染

这是我的代码与 Redux 操作和化简器 代码示例

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

尝试将拉取刷新功能添加到平面列表。检查这个

<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 2

当数据更新时，在平面列表中发送一个参数并在额外数据中设置。 像这样的例子：

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

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

Answer 3

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

所以，你需要更新componentDidUpdate中的道具。 尝试这样的事情：-

尝试如下：

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

查看此链接：- 组件DidUpdate