javascript - React Native - 从父级到子级的级联状态更新

问题描述

我正在尝试将状态更改从父组件级联到子级。

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.listUpdater = new_list_updater();

    this.state = {
      schoollist: this.listUpdater.update_list(),
    }
  } 

  listUpdateCallback = () => {
    console.log("Callback triggered!");
    console.log(this.state.schoollist.slice(1,3));
    this.setState({schoollist: this.listUpdater.update_list()});
    console.log(this.state.schoollist.slice(1,3));
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Header updateCallback={this.listUpdateCallback}/>
        <SchoolList school_list={this.state.schoollist}/>
      </SafeAreaView>      
    );
  }
}

listUpdater.update_list() 是一个类中的一个方法，它实现了 getISchools 和 ShuffleArray 并存储了正在被洗牌的学校列表。它返回洗牌的学校列表。

import { shuffleArray } from './Shuffle'
import { getISchools } from './iSchoolData'

class ListUpdater{
    constructor() {
        console.log("Initiating class!");
        this.currentSchoolList = [];
    }

    update_list() {
        console.log("Updating list!");
        if (this.currentSchoolList.length == 0){
            this.currentSchoolList = getISchools();        
        }
        else{
            shuffleArray(this.currentSchoolList);
        }
        return(this.currentSchoolList);
    }
}

export function new_list_updater(){
    return new ListUpdater();
}

据我所知，一切正常。当我按下 Header 组件中的刷新按钮时，它会触发 updateCallback，它会更新存储在状态变量中的列表（通过登录到控制台和 ComponentDidUpdate()

这是不刷新的组件：

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

export default class SchoolList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <SafeAreaView style={styles.listArea}>
                <FlatList
                data = {this.props.school_list}
                renderItem = {({item}) =>
                    <View style={styles.row}>
                        <View style={styles.num_area}>
                            <Text style={styles.num_text}>{item.key}</Text>
                        </View>
                        <View style={styles.text_area}>
                            <Text style={styles.univ_text}>{item.univ}</Text>
                            <Text style={styles.school_text}>{item.school}</Text>
                        </View>
                    </View>
                }
                />
            </SafeAreaView>
        );
    }

    componentDidUpdate(){
        console.log("SchooList Updated!");
    }
}

我期待的流程是：

父级将 updateCallback 引用传递给 Header（子级）
Header 中的 Refresh 按钮触发 Parent 中的 updateCallback
Parent 中的 updateCallback 使用 setState 更新状态
使用状态变量的父级和相关子级重新渲染，显示新列表

1-3 似乎有效，4 无效！

标签： javascriptreact-native

javascript - React Native - 从父级到子级的级联状态更新

问题描述

解决方案

推荐阅读