我正在尝试实现一种对数据进行排序（升序或降序）的方法。
我在返回中有这样的内容来创建一个SELECT:
return(
<Row>
<Search
onSubmit={ this.handleFilter }
onReset={ this.handleFilterReset }
Fields={[
{
component: Fields.Select,
name: 'name',
label: 'Date',
col: ['lg-12', 'md-12'],
data: self.fieldSelect()
}
]}
/>
fieldSelect(){
{
return [
{
label: "Disc",
value: this.setState({ordering: false})
},
{
label: "Asc",
value: this.setState({ordering: true})
}
]
}
}
我将更改this.state.ordering值以更改排序类型
这是字段。选择:
export const Select = (props) => {
const { input, meta: { touched, error, warning, active, visited, submitFailed }, ...rest } = props;
if (!props.hidden){
return(
<Wrapper
name={props.input.name}
hasError={error && visited}
addon={props.addon}
label={props.label}
error={error}
touched={visited || submitFailed}
warning={warning}
required={props.required || props.input.required}
instructions={props.instructions}
>
<React.Fragment>
{props.prepend || null}
<SelectField
{..._.omit(props.input, ['meta'])}
data={props.data}
value={input.value}
placeholder={props.placeholder || props.label || null}
disabled={props.disabled}
id={`input_${input.name}`}
allowCreate={props.allowCreate}
CustomOnChange={props.CustomOnChange}
getOptionValue={props.getOptionValue}
getOptionLabel={props.getOptionLabel}
/>
{props.children || null}
</React.Fragment>
</Wrapper>
)
}else{ return null }
}
我的问题是，我试图以这种方式操作，我会收到错误:
超过最大更新深度。 当组件重复调用componentWillUpdate或ComponentDidUpdate内部的setState时，可能会发生这种情况。 React限制嵌套更新的数量，以防止无限循环。
我该怎么做呢？ 谢谢
根据您的代码，很难确切地说出如何解决这个问题，但是我可以告诉您如何避免
超出最大更新深度...
当您的组件试图呈现
return(
...
data: self.fieldSelect()//Calling a function
...
);
您正在调用Self.FieldSelect()，而该调用将两次调用SetState
fieldSelect(){
return [
{
label: "Disc",
value: this.setState({ordering: false})//first call
},
{
label: "Asc",
value: this.setState({ordering: true})//second call
}
]
}
通过这两个调用，您正在改变状态，这意味着组件将进入无限循环。 如果您希望在选择其中一个选项时调用this.setState（{ordering:true}），则需要在selectonChange函数上执行此操作，在本例中，给定您的代码，该函数必须在CustomOnChange上
