javascript - Javascript Promise.all 来自获取多个未在 React Native FlatList 中呈现的 api

Question

我正在使用 Promise.all 来获取多个 api。

const ListScreen = () => {

const first = fetch('https://EXAMPLEAPI').then(resp => resp.json())
const second = fetch('https://EXAMPLEAPI').then(resp => resp.json())
const third = fetch('https://EXAMPLEAPI').then(resp => resp.json())

const retrieveAll = async function () {
    let results = await Promise.all([first, second, third])

当 console.log(results) 时，我从 apis 获取所有对象数组

问题是当我创建一个 FlatList 时，我没有在屏幕上呈现任何东西（空白）

const retrieveAll = async function () {
    let results = await Promise.all([first, second, third])

    return (
        <FlatList
            keyExtractor={item => item.title}
            data={results}
            renderItem={({ item }) => {
                return <Text>{item.title}</Text>
            }}
        />
    )
};

}

导出默认 ListScreen；

我究竟做错了什么？

请帮忙。:(

Answer 1

您需要re-render该组件，因为您必须使用 react Hooks。

这就是组件的样子

const RetrieveAll = function () {
    const [ results, setResults ] = useState([])
    useEffect( () => {
        Promise.all([first, second, third])
        .then(response => {
           setResults(response)
        })

    }, [])

    return (
        <FlatList
            keyExtractor={item => item.title}
            data={results}
            renderItem={({ item }) => {
                return <Text>{item.title}</Text>
            }}
        />
    )
};

用法

<RetrieveAll />

并尽量不要创建asyncJSX 元素。