React Native中子组件如何正确修改父组件的state状态

原代码存在的问题 #

• 父组件onSelect回调写法错误：setState未指定更新字段，直接传入未定义的year变量，且render方法缺少return返回JSX，语法不完整
• 子组件为函数组件，不存在this实例，无法调用this.setState；同时错误地在renderItem外层定义onSelect，未绑定到点击事件，还调用了不存在的onItemPress方法
• 父子组件传值链路断裂：子组件选中的item值没有正确透传给父组件的回调方法

父组件正确代码 #

class Home extends Component {
  state = {
    year: '',
    month: '',
    day: '',
  };

  // 统一处理下拉选中逻辑，通过字段名区分更新年/月/日
  handleDropdownSelect = (fieldName, selectedValue) => {
    this.setState({
      [fieldName]: selectedValue
    })
  }

  render() {
    return (
      <View>
        {/* 年份选择下拉 */}
        <Dropdown 
          label={i18n.locale == 'en' ? 'Year' : 'سنة'} 
          data={years} 
          onSelect={(item) => this.handleDropdownSelect('year', item)}
        />
        {/* 月份选择下拉 */}
        <Dropdown 
          label={i18n.locale == 'en' ? 'Month' : 'شهر'} 
          data={months} 
          onSelect={(item) => this.handleDropdownSelect('month', item)}
        />
        {/* 日期选择下拉 */}
        <Dropdown 
          label={i18n.locale == 'en' ? 'Day' : 'يوم'} 
          data={days} 
          onSelect={(item) => this.handleDropdownSelect('day', item)}
        />
      </View>
    )
  }
}

子组件正确代码 #

const Dropdown = ({ label, data, onSelect }) => {
  const renderItem = ({ item }) => (
    <TouchableOpacity 
      style={styles.item} 
      // 点击选项时直接调用父组件传入的回调，传入当前选中的item值
      onPress={() => onSelect(item)}
    >
      <Text style={styles.buttonText}>{item}</Text>
    </TouchableOpacity>
  );

  // 补全下拉组件其余渲染逻辑
  return (
    <View style={styles.dropdownContainer}>
      <Text style={styles.label}>{label}</Text>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => String(item)}
      />
    </View>
  )
}

核心逻辑说明 #

• React遵循单向数据流规则，子组件不能直接修改父组件的state，必须由父组件将更新state的方法通过props传递给子组件，子组件在对应交互触发时调用该方法、传入待更新的值，即可完成父组件state的更新
• 父组件通过计算属性[fieldName]复用同一个处理方法，适配年、月、日三个不同字段的更新需求，减少重复代码
• 子组件只负责触发回调、回传选中值，不需要感知父组件的state结构，实现组件解耦

内容的提问来源于stack exchange，提问作者wafa.A