Question

我的父组件是一个包含两件事的屏幕：

过滤器按钮（开/关）
包含 FlatList 的子组件

以下父组件的简化（伪）代码：

const mapStateToProps = state => ({
  filterValueFromRedux: state.filterValueFromRedux,
});

    render() {
        return (
          <TouchableOpacity
            onPress={() => {
             this.setState({xxxxx});
              ...also update redux value [filterValueFromRedux] here
            }}>
            <Text>Filter</Text>
          </TouchableOpacity>

          <View>
              <MyFlatList
                data={this.state.array}
                filterValueFromRedux={this.props.filterValueFromRedux}
              />
          </View>
        );
      }

以下子组件 MyFlatList 的简化（伪）代码：

  render() {
    return (
        <FlatList
          data={this.props.data}
          renderItem={({item}) => {
          ......this.props.filterValueFromRedux.....is used here
         }>
    )
  }

在父级上按下过滤器按钮时...父组件的状态会更新，以便父组件重新渲染。然而，即使修改了 redux 值 [filterValueFromRedux]（传递给子组件），子组件也不会重新渲染。任何想法为什么？

附言请尽量不要纠结于伪代码的准确性（因为它可能并不完美）.....我希望我们可以解决子组件在其父母执行时应呈现的原则（特别是当其中一个道具时传入正在改变）

子组件未与父组件一起渲染

0 个答案: