Question

我是新来的人，我想禁用地图功能中的React-switch按钮。用户在输入文本字段中输入键后，应启用它。我正在尝试在componentWillUpdate上启用它，但它说超出了最大调用堆栈大小。

constructor(props){
        super(props)
        this.state ={
            keyValues  : '',
            tokenValues : '',
            urlValues : '',
            checked : false,
            displayDetails : false,
            disableSwitch : true
        }
        this.toggleFunction = this.toggleFunction.bind(this);
    }

这是我的本地状态。

toggleFunction = (id ) =>{     
        let data =[];
        let loggedInUserEmail = JSON.parse(localStorage.loggedInUserDetails).email;

        data.push({
            projectId :  id,
            keyValues : this.state.keyValues,
            urlval : this.state.urlValues,
            tokens : this.state.tokenValues,
            email : loggedInUserEmail
        })  

        if(this.state.keyValues !== ''){
            this.props.dispatch(abc(data)) 
        }
    }

这是我的切换功能。

<Table cellpadding="5px" cellspacing="10px" type = 'SETTINGS_JIRA' tableClass = 'settings-jira-table'>
                    {listOfProj.map((item , index) => {
                        return(
                            <Row>
                                <Cell key = {index} cellClass = 'settings-jira-projects' > {item.get('projectTitle').toUpperCase()} </Cell>
                                <Cell> <input type='text' onChange = {(e) => this.setState({keyValues:e.target.value })}  className ='settings-jira-textfield' /> </Cell>
                                <Cell> <input type='text' onChange = {(e) => this.setState({tokenValues : e.target.value})} className ='settings-jira-textfield' /> </Cell>
                                <Cell> <input type='text' onChange = {(e) => this.setState({urlValues : e.target.value})}  className='settings-jira-textfield' /></Cell>
                                <Cell >
                                    <label htmlFor="material-switch">
                                        <Switch
                                            checked={this.state.checked}
                                            onChange ={() => {this.toggleFunction(item.get('projectId'))}}
                                            onColor="#86d3ff"
                                            onHandleColor="#2693e6"
                                            handleDiameter={25}
                                            uncheckedIcon={false}
                                            checkedIcon={false}
                                            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                                            height={17}
                                            width={45}
                                            className="react-switch"
                                            id="material-switch"
                                            disabled= {this.state.disableSwitch}
                                        />
                                    </label>
                                </Cell>
                            </Row>
                        )
                    })}
                </Table>

试图在生命周期组件中启用它

componentWillUpdate(){
        if(this.state.keyValues !== ''){
            this.setState(prevState => ({
                disableSwitch : !prevState.disableSwitch
            }))
        }
    }

谢谢！

Answer 1

您需要添加其他检查以与以前的状态进行比较：

componentWillUpdate(nextProps, nextState) {
  const { keyValues } = this.state;
  if (keyValues !== '' && keyValues !== nextState.keyValues) {
    this.setState(prevState => ({
      disableSwitch: !prevState.disableSwitch
    }))
  }
}

但是，这不是嵌套方法，因为此生命周期方法will be deprecated in the next major React release不再应使用。取而代之的是，您可以在切换功能或更新this.state.keyValues的功能中进行切换：

toggleFunction = (id) => {
  let data = [];
  let loggedInUserEmail = JSON.parse(localStorage.loggedInUserDetails).email;

  data.push({
    projectId: id,
    keyValues: this.state.keyValues,
    urlval: this.state.urlValues,
    tokens: this.state.tokenValues,
    email: loggedInUserEmail
  })

  if (this.state.keyValues !== '') {
    this.props.dispatch(abc(data));
    this.setState(prevState => ({
      disableSwitch: !prevState.disableSwitch
    }))
  }
}

Answer 2

当我们调用this.setState方法时，它会调用componentWillUpdate，这就是您的组件处于递归状态的方式，如果我们在componentWillUpdate()中触发状态更改，我们将陷入无限循环。我认为您需要更好地处理componentWillUpdate

中的支票

禁用反应开关

2 个答案: