RESOLVE：反应错误：超过最大更新深度

Question

我有这个错误:错误:超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，会发生这种情况。React限制嵌套更新的数量，以防止无限循环。

但是我不明白怎么解决！我只是在发布我的代码，对不起…

我的代码：

{this.state.messages.map(message =>
                        <li>
                            <p id="author">{message.message.author}</p>
                            <p id="date">{message.message.date}</p><br/>
                            <p id="message-content">{message.message.content}</p>
                            <button class="delete-button" type="submit" onClick={() => this.delete(message._id)}>suprimmer</button>
                            {this.state.setModify & this.state.idModify === message._id ?
                                <div id="modify-menu">
                                    {this.setState({modify: message.message.content})}
                                    <input class="modify-input" id={message._id} type="text" name="modify" value={this.state.modify} onChange={this.handleChangeModify.bind(this)}/>
                                    <button class="modify-send" id={message._id} type="submit" onClick={() => this.modify(message._id)}>envoyer</button>
                                    <button class="modify-cancel" id={message._id} type="submit" onClick={() => this.setState({setModify: false})}>annuler</button>
                                </div>:
                                <button class="modify-button" id={message._id} type="submit" onClick={this.activeModify.bind(this)}>modifier</button>
                            }
                            <hr></hr>
                        </li>
                    )}

Answer 1

好的，我用这段代码解决了我的问题：

activeModify(event){
    event.persist();
    this.setState({
        setModify: true,
        idModify: event.target.id
    })
    this.state.messages.map(message => {
        if (message._id === event.target.id) {
            this.setState({
                modify: message.message.content
            });
        }
    });
}

Answer 2

您正在渲染中使用{this.setState（{modify:message.message.content}）}。对于数组的每个元素this.state。消息它在状态中重新呈现修改对象。

您应该将{this.setState（{modify:message.message.content}）}调用移动到onClickonChange超过了最大更新深度

无需在渲染时设置修改字段，您可以直接在组件DidMount中执行此操作：

    componentDidMount() {
        axios.get(`http://localhost:8080/messages`)
            .then(res => {
                const messages = res.data;
                this.setState({
                    messages: messages,
                    message: '',
                    modify: messages.map(message => message.message.content),
                });
            })
    }