当我在组件中包含来自本地库的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
});
};
};
如果我删除选取器,它将起作用。为什么返回错误?
谢谢