超过React Native最大更新深度

Question

我遇到了错误：

这很有趣，因为我没有在componentWillUpdate或componentDidUpdate中设置setState。我只是在Input或Picker onChange方法上设置状态。

class AddWorkOrder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedUnit: undefined,
      selectedPriority: undefined,
      selectedVendor: undefined,
      selectedAssigned: undefined,
      descValue: '',
      CommonArea: false,
      photo: null,
    };
  }

  componentDidMount() {
    this.getAsyncUnits();
    this.getAsyncVendors();
    this.getAsyncPriorities();
    this.getAsyncAssigned();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.status !== this.props.status) {
      this.getUnitsAsync();
    }
  }

  onChangeUnit(value: string) {
    this.setState({
      selectedUnit: value
    });
  }

  onChangePriority(value: string) {
    this.setState({
      selectedPriority: value
    });
  }

  onChangeVendor(value: string) {
    this.setState({
      selectedVendor: value
    });
  }

  onChangeAssigned(value: string) {
    this.setState({
      selectedAssigned: value
    });
  }

  getAsyncUnits = async () => { await this.props.getUnits(); };
  getAsyncVendors = async () => { await this.props.getVendors(); };
  getAsyncPriorities = async () => { await this.props.getPriorities(); };
  getAsyncAssigned = async () => { await this.props.getAssigned(); };

  saveWK() {
    if (this.state.selectedUnit === undefined) {
      Alert.alert('Error', 'Unit is required!');
      return;
    }
    if (this.state.descValue === '') {
      Alert.alert('Error', 'Description is required!');
      return;
    }
  }

  render() {
    const { units, vendors, wkpriorities, assignedList } = this.props;

    return (
      <View style={styles.container}>
        <Form>
          <Card>
            <CardItem>
              <Octicons active name="tools" size={18} />
              <Text style={styles.cardText}>   Add Work Order</Text>
            </CardItem>
          </Card>
          <Item picker>
            <Picker
              mode="dropdown"
              iosHeader="Select Unit"
              placeholder="Units"
              iosIcon={<Icon name="arrow-down" />}
              style={{ width: undefined }}
              selectedValue={this.state.selectedUnit}
              onValueChange={this.onChangeUnit.bind(this)}
            >
            {Object.keys(units).map((key) => {
                return (
                  <Picker.Item
                    label={units[key]}
                    value={key}
                    key={key}
                  />
                );
            })}
            </Picker>
          </Item>
          <Item picker>
            <Picker
              mode="dropdown"
              iosHeader="Select Priority"
              placeholder="Priority"
              iosIcon={<Icon name="arrow-down" />}
              style={{ width: undefined }}
              selectedValue={this.state.selectedPriority}
              onValueChange={this.onChangePriority.bind(this)}
            >
            {Object.keys(wkpriorities).map((key) => {
                return (
                  <Picker.Item
                    label={wkpriorities[key]}
                    value={key}
                    key={key}
                  />
                );
            })}
            </Picker>
          </Item>

          <Item picker>
            <Picker
              mode="dropdown"
              iosHeader="Select Assigned To"
              placeholder="Assigned To"
              iosIcon={<Icon name="arrow-down" />}
              style={{ width: undefined }}
              selectedValue={this.state.selectedAssigned}
              onValueChange={this.onChangeAssigned.bind(this)}
            >
            {Object.keys(assignedList).map((key) => {
                return (
                  <Picker.Item
                    label={assignedList[key]}
                    value={key}
                    key={key}
                  />
                );
            })}
            </Picker>
          </Item>

          <Item picker>
            <Picker
              mode="dropdown"
              iosHeader="Select Vendor"
              placeholder="Vendor"
              iosIcon={<Icon name="arrow-down" />}
              style={{ width: undefined }}
              selectedValue={this.state.selectedVendor}
              onValueChange={this.onChangeVendor.bind(this)}
            >
            {Object.keys(vendors).map((key) => {
                return (
                  <Picker.Item
                    label={vendors[key]}
                    value={key}
                    key={key}
                  />
                );
            })}
            </Picker>
          </Item>

          <Item>
            <Input
              placeholder='Description'
              placeholderTextColor="#C0C0C0"
              value={this.state.descValue}
              onChangeText={(descValue) => this.setState({ descValue })}
              multiline
              style={{ height: 100 }}
            />
          </Item>

          <ListItem>
            <CheckBox
              checked={this.state.CommonArea} color="blue"
              onPress={() => this.setState({ CommonArea: !this.state.CommonArea })}
            />
            <Body>
              <Text>  Common Area?</Text>
            </Body>
          </ListItem>
          <Button
            full
            onPress={() => this.saveWK()}
          >
            <Text>Save</Text>
          </Button>

        </Form>
      </View>
    );
  }
}

您知道在哪里触发此循环吗？从错误中看起来像是从选择器中获得的，但是我找不到问题的原因。

谢谢

添加我的操作：

...

export const getUnits = () => {
  return (dispatch) => {
    const units = {
        "1": "101",
        "2": "102",
        "3": "103",
        "4": "104",
    };
    dispatch({
      type: GET_UNITS,
      payload: units
    });
  };
};

export const getVendors = () => {
  return (dispatch) => {
    const units = {
        "1": "Vendor1",
        "2": "Vendor2",
        "3": "Vendor3",
        "4": "Vendor4",
    };
    dispatch({
      type: GET_VENDORS,
      payload: units
    });
  };
};

export const getPriorities = () => {
  return (dispatch) => {
    const units = {
        '1': 'High',
        '3': 'Low',
    };
    dispatch({
      type: GET_WO_PRIORITY,
      payload: units
    });
  };
};

export const getAssigned = () => {
  return (dispatch) => {
    const units = {
        '1': 'Maintenance 1',
        '2': 'Maintenance 2',
        '3': 'Maintenance 3',
    };
    dispatch({
      type: GET_ASSIGNED_LIST,
      payload: units
    });
  };
};

Answer 1

因为您没有共享，所以我不知道this.getUnitsAsync（）的作用。但是，由于此函数不会更改状态值，因此它将陷入无限循环。只有正确更改条件或修改函数，才能避免无限循环。