Javascript 当父组件状态更改时，如何重新呈现子组件？

我有父组件，它也包括子组件。我将一些道具从父组件传递给子组件。我的问题是，当我更改滑块以在父组件上获取新值时，重新渲染在父组件上不起作用。这也会导致不重新渲染子组件

更改滑块时，将执行函数并使用新值更改状态。但此设置状态不是触发器重新启动程序。我正在调试下面的代码，控制台日志如下（将滑块从0更改为1）

当我触摸其中一个可触摸的不透明度时，得到这个.state.delay=0 但我通过滑块将0更改为1

// welcome.js

export default class welcome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      GridViewItems: [
        { key: "1 min game", min: 1, sec: 0 },
        { key: "3 min game", min: 3, sec: 0 },
        { key: "5 min game", min: 5, sec: 0 },
        { key: "7 min game", min: 7, sec: 0 },
        { key: "10 min game", min: 10, sec: 0 },
        { key: "15 min game", min: 15, sec: 0 }
      ],
      value : 0
    };
  }

  GetGridViewItem(item) {
    Alert.alert(item);
  }

  change(value) {
    console.log("change value -> " + value );
    this.setState({
      value: value
  })}

  render() {
    console.log("delay -> " + this.state.value);
    return (

      <View style={styles.MainContainer}>
        <Text style={styles.welcomeText}>Welcome ChessClock</Text>
        <Text style={styles.text}>Delay Time: {this.state.value}</Text>
        <Slider
          style = {styles.slider}
          step={1}
          maximumValue={20}
          value={this.state.value}
          onValueChange={(val)=> this.setState({value: val})}
        />
        <FlatList
          data={this.state.GridViewItems}
          renderItem={({ item }) => (
            <TimerTypes
              navigation={this.props.navigation}
              BlockStyle={styles.GridViewBlockStyle}
              TextStyle={styles.GridViewInsideTextItemStyle}
              title={item.key}
              time={item.min * 60 + item.sec}
              delay = {this.state.value}
            />
          )}
          numColumns={2}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    flex: 1,
    margin: 10,
    paddingTop: Platform.OS === "ios" ? 20 : 0
  },
  GridViewBlockStyle: {
    justifyContent: "center",
    flex: 1,
    alignItems: "center",
    height: 100,
    margin: 5,
    backgroundColor: "#05BC87"
  },
  GridViewInsideTextItemStyle: {
    color: "#fff",
    padding: 10,
    fontSize: 18,
    justifyContent: "center"
  },
  welcomeText: {
    color: "#0F2284",
    padding: 60,
    fontSize: 30,
    justifyContent: "center",
    textAlign: "center"
  },
  text: {
    fontSize: 20,
    justifyContent: "center",
    marginLeft:10
  },
  slider: {
    width: '100%',
    marginBottom: 25,
    justifyContent: "center",
    alignItems : "center"
  }
});



// timeTypes

export default class timeTypes extends Component {
    constructor(props) {
        super(props);
        this.state = {
            delay : props.delay
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ delay: nextProps.delay });  
      }

    render() {
        console.log("delay timetypes -> " + this.props.delay);
        console.log("delay timetypes -> " + this.state.delay);
        return (
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Home', {
                time: this.props.time,
                delay : this.state.delay
            })}
            style={this.props.BlockStyle} >
                <Text style={this.props.TextStyle}>
                    {this.props.title}
                </Text>
            </TouchableOpacity >
        );
    }
}

//welcome.js
导出默认类欢迎扩展组件{
建造师（道具）{
超级（道具）；
此.state={
GridViewItems：[
{键：“1分钟游戏”，分钟：1秒：0}，
{键：“3分钟游戏”，分钟：3秒：0}，
{键：“5分钟游戏”，分钟：5秒：0}，
{键：“7分钟游戏”，分钟：7秒：0}，
{键：“10分钟游戏”，分钟：10秒：0}，
{键：“15分钟游戏”，分钟：15秒：0}
],
数值：0
};
}
GetGridViewItem（项目）{
警报。警报（项目）；
}
更改（值）{
console.log（“更改值->”+值）；
这是我的国家({
价值：价值
})}
render（）{
log（“延迟->”+此.state.value）；
返回(
欢迎光临
延迟时间：{this.state.value}
this.setState（{value:val}）}
/>
(
)}
numColumns={2}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
辩护内容：“中心”，
弹性：1，
差额：10，
paddingTop:Platform.OS==“ios”？20:0
},
GridViewBlockStyle：{
辩护内容：“中心”，
弹性：1，
对齐项目：“中心”，
身高：100，
差额：5，
背景颜色：“05BC87”
},
GridViewInsideTextItemStyle：{
颜色：“fff”，
填充：10，
尺码：18，
为内容辩护：“中心”
},
欢迎图文：{
颜色：“0F2284”，
填充：60，
尺寸：30，
辩护内容：“中心”，
textAlign：“居中”
},
正文：{
尺寸：20，
辩护内容：“中心”，
边缘左侧：10
},
滑块：{
宽度：“100%”，
marginBottom:25，
辩护内容：“中心”，
对齐项目：“中心”
}
});
//时间类型
导出默认类timeTypes扩展组件{
建造师（道具）{
超级（道具）；
此.state={
延迟：道具。延迟
}
}
组件将接收道具（下一步）{
this.setState（{delay:nextrops.delay}）；
}
render（）{
log（“延迟时间类型->”+this.props.delay）；
log（“延迟时间类型->”+此.state.delay）；
返回(
this.props.navigation.navigate（'Home'{
时间：这个。道具。时间，
延迟：这个。状态。延迟
})}
style={this.props.BlockStyle}>
{this.props.title}
);
}
}

快乐的路径应该是，当更改滑块以获得新编号时，父级将重新渲染，子级应获得新值

github回购：

根据文件：

FlatList是一个PureComponent，这意味着如果 道具仍然是相等的。确保所有的东西都符合你的要求 函数dependent作为一个属性（例如extraData）传递，该属性不是 ===更新后，否则您的UI可能不会随更改而更新。这包括数据属性和父组件状态

---

因此，请尝试将

extraData={this.state.value}

添加到平面列表组件中

是否尝试将

extraData={this.state.value}

添加到平面列表组件中？谢谢。成功了。现在我有问题了。事实上，组件没有问题，但相同的道具不会导致渲染子级。我很抱歉，我没有得到这个问题。。。当您将相同的道具传递给您的时间类型组件时。。。预期的行为不是重新呈现组件，正如您所看到的，我们已经为时间类型赋予了不同的值。但时间类型在平面列表中，我没有对平面列表进行任何更改。因此，flatlist没有看到任何更改，也没有呈现自己和子对象。即使将

exterdata={this.state.value}

传递到flatlist？？，您的TimeTypes组件也不会重新呈现。。。将extraData字段添加到平面列表后。。。当

值

的状态发生变化时，如果时间类型组件不起作用，则应重新呈现该组件。。。试试这个

extraData={this.state}

// welcome.js

export default class welcome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      GridViewItems: [
        { key: "1 min game", min: 1, sec: 0 },
        { key: "3 min game", min: 3, sec: 0 },
        { key: "5 min game", min: 5, sec: 0 },
        { key: "7 min game", min: 7, sec: 0 },
        { key: "10 min game", min: 10, sec: 0 },
        { key: "15 min game", min: 15, sec: 0 }
      ],
      value : 0
    };
  }

  GetGridViewItem(item) {
    Alert.alert(item);
  }

  change(value) {
    console.log("change value -> " + value );
    this.setState({
      value: value
  })}

  render() {
    console.log("delay -> " + this.state.value);
    return (

      <View style={styles.MainContainer}>
        <Text style={styles.welcomeText}>Welcome ChessClock</Text>
        <Text style={styles.text}>Delay Time: {this.state.value}</Text>
        <Slider
          style = {styles.slider}
          step={1}
          maximumValue={20}
          value={this.state.value}
          onValueChange={(val)=> this.setState({value: val})}
        />
        <FlatList
          data={this.state.GridViewItems}
          renderItem={({ item }) => (
            <TimerTypes
              navigation={this.props.navigation}
              BlockStyle={styles.GridViewBlockStyle}
              TextStyle={styles.GridViewInsideTextItemStyle}
              title={item.key}
              time={item.min * 60 + item.sec}
              delay = {this.state.value}
            />
          )}
          numColumns={2}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    flex: 1,
    margin: 10,
    paddingTop: Platform.OS === "ios" ? 20 : 0
  },
  GridViewBlockStyle: {
    justifyContent: "center",
    flex: 1,
    alignItems: "center",
    height: 100,
    margin: 5,
    backgroundColor: "#05BC87"
  },
  GridViewInsideTextItemStyle: {
    color: "#fff",
    padding: 10,
    fontSize: 18,
    justifyContent: "center"
  },
  welcomeText: {
    color: "#0F2284",
    padding: 60,
    fontSize: 30,
    justifyContent: "center",
    textAlign: "center"
  },
  text: {
    fontSize: 20,
    justifyContent: "center",
    marginLeft:10
  },
  slider: {
    width: '100%',
    marginBottom: 25,
    justifyContent: "center",
    alignItems : "center"
  }
});



// timeTypes

export default class timeTypes extends Component {
    constructor(props) {
        super(props);
        this.state = {
            delay : props.delay
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ delay: nextProps.delay });  
      }

    render() {
        console.log("delay timetypes -> " + this.props.delay);
        console.log("delay timetypes -> " + this.state.delay);
        return (
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Home', {
                time: this.props.time,
                delay : this.state.delay
            })}
            style={this.props.BlockStyle} >
                <Text style={this.props.TextStyle}>
                    {this.props.title}
                </Text>
            </TouchableOpacity >
        );
    }
}