时间戳

首页 > 解决方案 > 无法更新此 React 组件的状态

javascript - 无法更新此 React 组件的状态

问题描述

我希望select标签state.value根据这个React 文档使用道具更新选定的值。

父组件正在传递title给props这个组件，问题是我收到了这个错误：

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

而且我不明白为什么要递归循环。你能帮我解决这个问题吗？ 

import React, {Component} from 'react'

class BookShelfChanger extends Component {
    state = {
        value: '',
        isMounted: false
    }

    componentDidMount() {
        this.setState({ isMounted: true })
    }

    checkOptions(title) {
        if(!this.state.isMounted) return

        let val;

        switch(title) {
            case 'currentlyReading':
                this.setState({ value: title})
                val = 'Currently Reading'
                break

            case 'wantToRead':
                this.setState({ value: title})
                val = 'Want To Read' 
                break

            case 'read':
                this.setState({ value: title})
                val = 'Read'
                break
            default:
        }
        return val
    }

    render() {
        return (
                <select value={this.state.value} onChange={this.checkOptions}>
                    <option value="move" disabled>Move to...</option>
                    <option value="currentlyReading">{this.checkOptions(this.props.title)}</option>
                    <option value="wantToRead">{this.checkOptions(this.props.title)}</option>
                    <option value="read">{this.checkOptions(this.props.title)}</option>
                    <option value="none">None</option>
                </select>
        )
    }
}

export default BookShelfChanger

标签： javascriptreactjs

解决方案

你不应该在你的渲染函数中调用 setState 。这将导致调用 setState 的无限循环。每当你 setState 时，React 都会重新渲染，如果你在 render 中调用 setState，那么它将导致另一个渲染，这将再次导致 setState 并且循环继续。这就是您看到错误的原因。相反，您可以尝试以下操作：

 checkOptions=(event, )=>{

    let val;
    console.log(event.target.value) // Gives you the selected option's value

}

render() {
    return (
            <select value={this.state.value} onChange={this.checkOptions}>
                <option value="move" disabled>Move to...</option>
                <option value="currentlyReading">currentlyReading</option>
                <option value="wantToRead">wantToRead</option>
                <option value="read">read</option>
                <option value="none">None</option>
            </select>
    )
}

推荐阅读