無法更新此React組件的狀態

Question

我希望select標簽根據這個React文檔使用state.value更新選擇的值。

父組件正在將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

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)}>