React Native child 未收到更新的道具值

Question

我是 React 新手，正在制作一个小应用程序来学习库和思维方式。
但是我运行遇到了一个让我完全崩溃的问题...

我有包含任务列表的根组件。我将这些任务传递给自定义组件以将它们呈现为这样的组：
<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 序列的屏幕截图。

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

Answer 1

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

为了在每个渲染上记录运行s，您可以将 console.logs 移动到 componentDidUpdate。

React Native child 未收到更新的道具值

React native child not receiving updated props value

reactjs

typescript

react-native

react-props

react-children