Question

我希望select标签根据此React document用state.value道具更新所选值。

父组件正在将title作为props传递给该组件，问题是我遇到了以下错误：

已超过最大更新深度。当一个组件发生这种情况重复调用componentWillUpdate内的setState或 componentDidUpdate。 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

Answer 1

您不应在渲染函数内调用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>
    )
}

Answer 2

您需要将onChange绑定到您的组件，否则this.checkOptions会在呈现组件时运行。 checkOptions导致组件更新，从而导致无限循环。

尝试一下：

<select value={this.state.value} onChange={this.checkOptions.bind(this)}>

无法更新此React组件上的状态

2 个答案: