javascript - 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. 父级将 updateCallback 引用传递给 Header(子级)

2. 标题中的刷新按钮触发父级中的 updateCallback

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

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

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

Answer 1

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

你可以用这种方式复制数组(这是 ES6 的语法): newArray = [...oldArrray]; 或者使用其他方法。