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

我期望的流程是：

父级将updateCallback引用传递给标头（子级）
刷新按钮会触发父级中的updateCallback
updateCallback使用setState更新状态
使用状态变量的父级和相关子级重新呈现，显示新列表

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

Answer 1

使用setState出于某种原因，也许您的componenet没有重新渲染。尝试在render方法中添加警告以进行检查。我还注意到您正在对数组this.currentSchoolList进行突变，绞盘是passade作为状态的引用（所有对象都作为引用传递）。尝试在调用shuffleArray（this.currentSchoolList）之前替换该副本，以复制数组。

您可以通过这种方式复制数组（这是ES6语法）：newArray = [... oldArrray]; 或使用其他方法。

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

1 个答案: