Question

我正在尝试将道具传递给第一个 imgUrl 和 stra 的 setState 处理提交，然后调用该事件并设置第二个状态，但我不断收到错误消息

错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

所以我不确定我现在做错了什么。请提前帮助并感谢您

    constructor(props) {
        super(props);
        this.state = {
            imgUrl: '',
            stra: '',
            openForm: false,
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.closeForm = this.closeForm.bind(this);
        // this.handleForm = this.handleForm.bind(this);
    }

    handleSubmit = (stra, imgUrl) => {
        this.setState({strain: stra, imgUrl: imgUrl})

        return event => {
            event.preventDefault()
            this.setState({openForm: true})
        }
        // e.preventDefault();
        
    }


render() {
                                    <p className='px-5 '>
                                        <a onClick={this.handleSubmit('Bue', SimpleBlack)} class="btn btn-primary btn-full" href="#">Request</a>
                                    </p>
}

Answer 1

尝试这样的事情：

handleSubmit = (stra, imgUrl) => {
    const self = this;

     .....

    this.setState({strain: stra, imgUrl: imgUrl},
          () => {
                    .....
                         Place here what you want 
                         to be done just before
                         opening the form but after stra and imgUrl 
                         get their respective state values
                    .....

                    self.setState({openForm: true})
          }
    );       
}

基本上就是setState回调的使用。

Answer 2

您可以使用 setStateinside componentDidUpdate。问题是您正在创建一个无限循环，因为没有中断条件。

componentDidUpdate() 在 componentDidMount() 之后被调用，当状态改变时执行一些动作很有用。 componentDidUpdate() 将前一个道具和前一个状态作为它的前两个参数。在方法内部，我们可以检查是否满足条件并根据它执行操作。

例如，在下面的代码中，我们检查之前的状态和当前的状态是否不同。如果是，将运行控制台日志语句。

componentDidUpdate(prevProps, prevState) {
  if (prevState.pokemons !== this.state.pokemons) {
    console.log('pokemons state has changed.')
  }
}

我们什么时候使用 componentDidUpdate() ？

何时使用 componentDidUpdate() 的一个例子是我们需要在先前状态和当前状态发生变化的情况下调用外部 API。

对 API 的调用将取决于正在更改的状态。如果没有状态变化，则不会调用 API。

如前所述，为避免无限循环，API 调用需要在条件语句中。

反应 onSubmit 传递道具

2 个答案: