从 React Native 和 Redux 中的嵌套子级更新父道具

问题描述

我在父组件和子组件之间存在通信问题。我知道不建议修改子级别的 pros，我也知道可以通过在父组件上执行的调用回调函数。

这里是关于实现的更多细节：

1 - 我有一个搜索屏幕 SearchScreen，带有一个搜索按钮，该按钮可以调度调用 API 的 Redux 操作，在获得结果后，我们导航到第二个屏幕 ResultScreen。

  class SearchScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
          immatriculation: '',};
      }
      confirmer = () => {
        if (this.state.immatriculation) {
          let action = searchAction.requestFindByImm({
            type: Constants.SEARCH_BY_IMM,value: {
              cmd: 'findByImm',data: {
                numero: this.state.immatriculation
              },},});
          this.props.navigation.navigate('ResultScreen',{
            first: true,});
          this.props.dispatch(action);
        }
      };
      render() {
        return (
          <View>
            <ScrollView
              horizontal={false}
              ref={(ref) => {
                this.scrollViewRef = ref;
              }}
              onLayout={(event) => {
                this.layout = event.nativeEvent.layout;
              }}>
              <Row>
                <Col size={2}>
                  <Text>
                   Immatriculation
                  </Text>
                </Col>
                <Col size={4}>
                  <TextInput
                    mode="outlined"
                    value={this.state.immatriculation}
                    onChangeText={(text) =>
                      this.setState({immatriculation: text})
                    }
                  />
                </Col>
              </Row>
              <Divider />
              <Button
                onPress={this.confirm}
                icon="check"
                compact="true"
                mode="contained">
                {translate('confirm')}
              </Button>
            </ScrollView>
          </View>
        );
      }
    }
    
    const mapStatetoProps = (state) => ({
      ...state.searchReducer,});
    
    export default connect(
      mapStatetoProps,null,)(SearchScreen);

2 - 我通过 mapStatetoProps 在包含嵌套组件 (ResultScreen -> Comp1->...) 的第二个屏幕上捕获结果，并将 mapStatetoProps 接收到的参数传递给子组件。

class ResultScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      errorMsg: '',name: '',};
  render() {
    return (
      <View>
        <ScrollView
          horizontal={false}
          ref={(ref) => {
            this.scrollViewRef = ref;
          }}
          onLayout={(event) => {
            this.layout = event.nativeEvent.layout;
          }}>
          <Grid>
            <Row >
              <Col size={2}>
                <TextInput
                  mode={'outlined'}
                  value={
                    this.props.data.name
                  }
                  label={translate('name')}
                  onChangeText={(text) =>
                    this.setState({
                      name: text,})
                  }
                />
              </Col>
     ......
     
          
            </Row>
          </Grid>
          <Comp1 datainfo={this.props.data.listeinfo} />
        </ScrollView>
      </View>
    );
  }
}
function mapStatetoProps(state) {
  return {...state.searchReducer};
}

export default connect(
  mapStatetoProps,)(ResultScreen);

因此，在子组件 Comp1 上，我需要对道具 (props.datainfo) 进行更改，因为我有一个输入可以将项目添加到我收到的列表以及我阻止的位置。

export default class Comp1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listeInfo: [],newinfo: "",selectedItem: "",};
  }
  static getDerivedStateFromProps(props,state) {
    if (props.datainfo !== state.listeInfo) {
      return {
        listeInfo: props.datainfo,};
    }
    return null;
  }

  add = () => {
    this.setState({listeInfo: [...this.state.listeInfo,this.state.newinfo]})
  };


  renderItem = ({item}) => {
    return (
      <View >
        <TouchableOpacity
          onPress={() =>
            this.setState({
              selectedItem: item,})
          }>
          <Text>{item}</Text>
        </TouchableOpacity>
      </View>
    );
  };
  render() {
    const {listeInfo,newinfo} = this.state;

    return (
 
            <Row>
              <Col>
                <infoTextInput
                  value={newinfo}
                  label={translate(info)}
                  onChangeText={(text) =>
                          this.setState({newinfo: text})
                        }
                />
              </Col>
            <Col>
                <Button onPress={this.add}>
                    {translate('add')}
                  </Button>
              </Col>

              <Col >
                <SafeAreaView >
                    <FlatList
                      data={listeInfo}
                      renderItem={(item) => this.renderItem(item)}
                      keyExtractor={(item) => item}
                      nestedScrollEnabled={true}
                    />
                </SafeAreaView>
              </Col>
            </Row>
    );
  }
}

有什么建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）