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

Question

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

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!");
    }
}

我期待的流程是：

1. Parent 将 updateCallback 引用传递给 Header（子）

2. Header 中的刷新按钮触发 Parent 中的 updateCallback

3. Parent 中的 updateCallback 使用 setState 更新状态

4. 使用状态变量的父级和相关子级重新渲染，显示新列表

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

Answer 1

当您出于某种原因使用 setState 时，您的组件可能不会重新渲染。尝试在渲染方法中添加警告来检查这一点。我还注意到您正在更改数组 this.currentSchoolList，绞盘作为您的状态的参考传递（所有对象都作为参考传递）。尝试在调用 shuffleArray(this.currentSchoolList) 之前替换它，制作数组的副本。

你可以这样复制数组（这是 ES6 sintax）： newArray = [...oldArrray]; 或者使用其他方法。