反应原生孩子没有收到更新的道具值答案

【问题标题】：React native child not receiving updated props value反应原生孩子没有收到更新的道具值
【发布时间】：2022-01-17 22:29:29
【问题描述】：

我是新来的反应和制作一个小应用程序来学习图书馆和思维方式。
但是我遇到了一个让我完全跺脚的问题......

我有包含任务列表的根组件。我将这些任务传递给自定义组件，以将它们呈现为如下组：
<TasksView tasks={this.state.tasks}></TasksView>
其中this.state.tasks 是一个包含所有当前任务的数组。

但问题是我的TaskView 组件似乎从来没有收到这些任务...

完整代码见下：

根：

class App extends Component<{}, IAppState> {

    constructor(props: any) {
        super(props);

        this.state = {
            taskCategories: [],
            tasks: [],
            currentTask: {}
        };
    }

    testing() {
        this.setState((prev: IAppState) => {
            return {
                tasks: [...prev.tasks, {
                    index: 0,
                    timespan: [TimeTypes.Day, TimeTypes.Week, TimeTypes.Month, TimeTypes.Year][Math.round(Math.random() * 9)],
                    name: '',
                    repeatAmount: 0,
                    repeatDelay: 0,
                    category: {
                        id: 0,
                        color: "",
                        name: ""
                    },
                    onComplete: function (index: number): void {
                        throw new Error('Function not implemented.');
                    }
                }]
            }
        });
    }


    render() {
        console.log("tasks count in parent: ", this.state.tasks.length); //<-- console.log A
        return (
            <SafeAreaView style={styles.container}>
                <TasksView tasks={this.state.tasks}></TasksView>
                <TouchableOpacity
                    onPress={this.testing.bind(this)}
                    style={styles.createTask}
                >
                </TouchableOpacity>
            </SafeAreaView>
        )
    }
};

任务视图：

class TasksView extends Component<TasksViewProps, any> {

    taskGroups: TasksGroupData[];
    stickyIndices: number[];

    constructor(props: TasksViewProps) {
        super(props);

        console.log("props should be updated..."); //<-- console.log B
        console.log(props.tasks.length);           //<-- console.log C

        this.taskGroups = [];
        this.stickyIndices = [];
    }

    render(): ReactNode {
        return [
            <Text style={tasksViewStyle.title}>Your Goals</Text>,
            <ScrollView
                stickyHeaderIndices={this.stickyIndices}
                showsVerticalScrollIndicator={false}
                style={tasksViewStyle.scrollView}
            >
                {this.taskGroups.map((group: TasksGroupData, index: number) =>
                    <TasksGroup key={index} timespan={group.timespan} tasks={group.tasks}></TasksGroup>
                )}
            </ScrollView>
        ];
    }
}

我省略了所有接口定义和一些辅助函数，因为它们与手头的问题无关。

所以我期望每次执行 console.log A 时 console.log B 和 C 也会被执行，但事实并非如此。
在此处查看当前 console.log 序列的屏幕截图。

如果需要任何其他信息，请告诉我，以便我更新问题。

【问题讨论】：

嘿，constructor 不会在每次组件重新渲染时重新运行 - React 可能会跨渲染重用相同的类实例。相反，要检查这些值，请尝试将您的日志记录移至 componentDidUpdate - 我不确定您的 UI 是否存在实际问题，或者只是日志记录与您预期的不符，但这应该可以修复日志记录 :)跨度>
好吧，很酷，谢谢不知道这一点。 UI 没有问题，因为还没有：p 仅在日志记录状态:) 只是好奇你说 react 可能会在渲染过程中多次重复使用相同的类实例。总是这样还是在什么情况下会发生这种情况？因为了解您是否依赖类变量来跨多个重新渲染存储数据非常重要。
太棒了！我不得不在那里仔细检查文档，但实际上可以保证在安装组件时保持相同的类实例 - 我已经在答案中发布了更新的信息:)

标签： reactjs typescript react-native react-props react-children

【解决方案1】：

constructor 仅在组件首次挂载时运行一次，因为 React 在组件的生命周期内重复使用相同的类实例 (see these docs)。这就是为什么您在最初运行一次后看不到日志记录调用的原因。

对于在每次渲染上运行的日志记录，您可以将您的 console.logs 移动到 componentDidUpdate。

【讨论】：