返回的本机基本选择器:“超出最大更新深度”

时间:2019-07-25 17:25:10

标签: react-native redux native-base

当我在组件中包含来自本地库的Picker标记时,出现错误:

“不变违规:不变违规:超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。React限制了嵌套更新的数量以防止无限循环。”

...
import {
  Item, ListItem, Input, Form, Body, CardItem,
  Picker, Icon, CheckBox, Button, Card
} from 'native-base';
import Octicons from 'react-native-vector-icons/Octicons';
import { connect } from 'react-redux';
import { getUnits } from '../../actions';

...

class MyComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedUnit: undefined,
    };
  }

  componentDidMount() {
    this.props.getUnits();
  }

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

  render() {
    return (
      <View style={styles.container}>
        <Form>
          <Card>
            <CardItem>
              <Octicons active name="tools" size={18} />
              <Text style={styles.cardText}>   Units</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={(text) => this.onChangeUnit(text)}
            >
            {Object.keys(this.props.units).map((key) => {
                return (
                  <Picker.Item
                    label={this.props.units[key]}
                    value={key}
                    key={key}
                  />
                );
            })}
            </Picker>
          </Item>
        </Form>
      </View>
    );
  }
}

const mapStateToProps = ({ util }) => {
  const { error, units } = util;

  return { error, units };
};

export default connect(mapStateToProps, {
  getUnits
})(MyComp);

Action getUnits非常简单(目前为硬编码)。

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

如果我删除选取器,它将起作用。为什么返回错误?

谢谢

0 个答案:

没有答案