[英]Can't update the state on this React Component
I want the select
tag to update the selected value with the state.value
prop according to this React document . 我希望
select
标签根据这个React文档使用state.value
更新选择的值。
The parent Component is passing title
as props
to this Component, the problem is that I'm getting this error: 父组件正在将
title
作为props
传递给该组件,问题是我遇到此错误:
Maximum update depth exceeded.
超过最大更新深度。 This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。 React limits the number of nested updates to prevent infinite loops.
React限制了嵌套更新的数量,以防止无限循环。
And I don't understand why is looping recursively. 而且我不明白为什么递归循环。 Would you please help me with this?
您能帮我吗?
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
You should not call setState inside your render function. 您不应在渲染函数中调用setState。 This would lead to infinite loop of calling setState.
这将导致调用setState的无限循环。 Whenever you setState, React re-renders, if you call setState inside render, then it would lead another render which would again lead to setState and loop continues.
每当您使用setState时,React都会重新渲染,如果您在render内调用setState,则它将导致另一个渲染,这将再次导致setState并继续循环。 Thats why you are seeing the error.
那就是为什么您看到错误。 Instead you can try following:
相反,您可以尝试以下操作:
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>
)
}
You need to bind the onChange to your component or else this.checkOptions runs whenever the component is rendered. 您需要将onChange绑定到您的组件,否则this.checkOptions会在呈现组件时运行。 checkOptions causes the component to update which leads to the infinite loop.
checkOptions导致组件更新,从而导致无限循环。
Try this: 尝试这个:
<select value={this.state.value} onChange={this.checkOptions.bind(this)}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.