反应本机“预取”数据？

Question

有没有办法在列表中显示数据之前已经加载数据？我们有一个FlatList，它通过在componentWillMount（）中进行提取来加载所有国家/地区，但这需要一瞬间加载并呈现列表。有没有办法已经加载了这些数据，所以当显示这个列表时（它目前在嵌套的堆栈导航器中），国家列表已经存在？我们确实考虑在根屏幕中加载它并将状态作为支柱传递给数据，但它感觉不是“正确”。

我有一种感觉，这是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}/>;
    }
}

在fetch完成之前，render方法将返回null，而React将不会呈现任何内容。