javascript - 如何在 React Native 中动态更新 FlatList？

Question

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

如何在更新到 API 并将新数据加载到 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();

}

平面列表代码:

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

}

非常感谢任何帮助...

Answer 1

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