反应本机 "prefetch" 数据？

Question

有没有办法让数据在列表中显示之前已经加载？我们有一个 FlatList，它通过在 componentWillMount() 中进行提取来加载所有国家/地区，但这需要一瞬间来加载和呈现列表。有没有一种方法可以加载此数据，以便在显示此列表时（它当前位于嵌套堆栈导航器中）国家/地区列表已经存在？我们确实考虑过将它加载到根屏幕中并将状态作为数据的道具向下传递，但它感觉不到 "right" 方式。

我觉得这对 Redux 很有用，但我们目前不使用它。

谢谢大家！

Answer 1

在获取国家/地区时您想显示什么？如果你什么都不想要，你可以这样做：

class Parent extends Component {
    componentWillMount() {
        fetch("example.com/countries")
            .then(res => res.json())
            .then(countries => this.setState({ countries }));
    }

    render() {
        const { countries } = this.state;
        return !countries ? null : <FlatList data={countries}/>;
    }
}

在获取完成之前，render 方法将 return null 并且 React 不会呈现任何东西。

反应本机 "prefetch" 数据？

React native "prefetch" data?

list

reactjs

redux

fetch

native