Twitter 克隆在添加新帖子后不会显示新帖子，除非重新启动应用程序 - React Native

Question

我正在创建一个 Twitter 克隆作为一个小项目，以更好地进行 IOS 开发，除了每当我添加帖子时，应用程序不会反映这些更改，除非重新启动，一切都进展顺利，我几乎100% 确定它是因为获取帖子信息的 fetch 调用不在组件返回语句中，因此它没有在渲染上运行，但是当我尝试将 fetch 调用放入函数内部时，它无法识别变量不再......如果有人能告诉我为什么会发生这种情况，我将不胜感激！

import React from 'react';
import { View, Text, StyleSheet, ScrollView, FlatList } from 'react-native'

var posts = ''

fetch("API URL WAS HERE BUT ITS PRIVATE NOW")
  .then(response => response.json())
  .then(data => {
    posts = data;
    posts
  });

function Posts({ navigation , route }) {
    return(
        <View style={styles.container}>
            <FlatList
                refreshing
                inverted
                data={posts}
                renderItem={({ item }) => (
                    <View style={styles.background} key={item.postid}>
                        <View style={styles.usernameBox}>
                            <Text>@{item.username}</Text>
                        </View>
                        <Text style={{color: "white"}}>{item.content}</Text>
                    </View>
                )}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    background: {
        width:370,
        minHeight: 60,
        height: "auto",
        borderRadius: 15,
        padding: 10,
        paddingBottom: 40,
        marginLeft: 30,
        marginRight: 30,
        marginBottom: 10,
        marginTop: 10,

        backgroundColor: "#656CB4"
    },
    container: {
        flex: 1
    },
    usernameBox: {
        width: 100,
        height: 25,
    }
})

export default Posts;

Answer 1

要展示 Chukwujiobi Canon 建议的示例，请尝试以下操作：

function Posts({navigation,route}){
    // call useState to receive a state variable (posts) and setter (setPosts) that you could name whatever you want
    const [posts, setPosts] = useState('');
    fetch('your url')
        .then(res => res.json())
        // call setter with new data
        .then(data => setPosts(data))
    return (/* your return code that uses "posts" */)
}

注意：useState 不会在您调用“setPosts”时的同一范围内立即调用 console.log 中显示。

正如他们所解释的，react 不会像你期望的那样处理“正常”变量。 如果您希望它们在渲染之间持续存在，某种形式的状态就是您的答案。 如果您的用例需要全局数据，请考虑使用 redux 之类的东西。 如果您发现自己通过大量组件深入传递数据，React 的 useContext 钩子可能有助于管理它。

反应 useState 文档

反应 useContext 文档