如何在本机反应中动态更新 FlatList？答案

【问题标题】：How to update the FlatList dynamically in react native?如何在本机反应中动态更新 FlatList？
【发布时间】：2021-01-22 08:21:13
【问题描述】：

最初使用 setState 将数据从 API 加载到 FlatList 并且加载完美。但我必须执行一些操作，例如创建、更新和删除 FlatList 行。当我尝试向 FlatList 添加新数据时，数据不会在 FlatList 中呈现更新的数据，但在 API 中会更新。

更新到 API 后如何重新渲染 flatlist 并将新数据加载到 FLatList？

这是我的代码：

  constructor(props) {
    super(props);
    this.state = {
        faqs: [],

    }

    this.loadFaq();

 };

从 API 将数据加载到 FlatList：

 loadFaq = async () => {
    let resp = await this.props.getFaqGroup();
    if (resp.faqs) {
        
        console.log(resp.faqs)
        this.setState({
            faqs: resp.faqs,
            // refresh: !this.state.refresh
        })

    }

   };

向 API 添加新数据：

 createFaqGroup = async (name) => {
    let resp = await this.props.createFaqGroup(name);
    // console.log("resp", resp)
    // this.setState({
    //     refresh: !this.state.refresh
    // })
    // this.forceUpdate();

    this.closePanel();

}

FlatList 代码：

    {this.state.faqs && <FlatList
                    extraData={this.state.faqs}
                    horizontal={false}
                    data={this.state.faqs}
                    contentContainerStyle={{ paddingBottom: 75 }}

                    renderItem={({ item: faqs }) => {

                        return <Card gotoQuestionList={this.gotoQuestionList} key={faqs._id} faqs={faqs} openPanel={(selectedFaq) => this.openPanel({ name: selectedFaq.name, id: selectedFaq._id })} deletePanel={(selectedFaq) => this.deletePanel({ name: selectedFaq.name, id: selectedFaq._id, isPublished: selectedFaq.isPublished })}></Card>
                    }

                    }
                    keyExtractor={(item) => item._id}
                />}

this.props.createFaqGroup 功能代码：

export const createFaqGroup = (name) => {
  const options = {
    method: 'POST',
    data: { "name": name },
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${store.getState().auth.info.token}`
    }
};
return async (dispatch) => {
    console.log('url::', options)
    try {
        let url = `${config.baseUrl}${config.faqUrl}`;
        let resp = await axios(url, options);
       
        console.log(resp.data)
        return resp && resp.data ? resp.data : null;
    } catch (error) {
        alert(error)
        if (error.response && error.response.status === 401) {
            dispatch({
                type: type.ERROR,
                data: error.response.data
            });
        } else {
            dispatch({
                type: type.CREATE_FAQ_GROUP_ERROR,
                error: error.message
            });
        }
    }
 };

}

任何帮助都非常感谢...

【问题讨论】：

您是否尝试过仅使用 extraData={this.state} ？更新后的响应状态是否也发生了变化？请提供任何调试日志

标签： javascript reactjs list react-native react-native-flatlist

【解决方案1】：

我认为您应该在添加数据后再次加载数据，这样您就可以像这样修改您的函数 createFaqGroup：

createFaqGroup = async (name) => {
  let resp = await this.props.createFaqGroup(name);
  this.loadFaq();

  this.closePanel();
}

【讨论】：

如果我再次加载它只显示最近添加的数据。
我可以看看 this.props.crateFaqGroup 函数吗，因为我认为你可能会改变状态，这就是为什么不重新渲染
this.props.createFaqGroup 是 api 函数。
我已将 this.props.createFaqGroup 函数更新为问题。请检查一下

【解决方案2】：

试试这个：

createFaqGroup = async (name) => {
  let resp = await this.props.createFaqGroup(name);
  this.setState({faqs: [...this.state.faqs, name]})

  this.closePanel();
}

【讨论】：

感谢您的回答。仍然面临同样的问题。它在 FlatList 中显示单行。

【解决方案3】：

Flatlist 将在您设置状态时自动更新，即使用 this.setState() 函数，这意味着无论何时对您的状态变量进行任何更改，它都会重新呈现您的 flatlist。如果您仍然面临同样的问题，请删除您的 this.state.faqs && 部分，这看起来没有必要，因为无需检查您是否将空数组传递给 faltlist，flatlist 允许您也传递空数组，它不会给你任何错误。

【讨论】：

关于此的任何示例。我是原生反应的新手