反应重定向问题我得到无法读取集合未定义状态

Question

我正试图在点击按钮时重定向到第二个页面。然而，在处理下面的代码时，我无法读取未定义的setState。

this.state = {
arr: [],
redirect: false
};
setRedirect() {
this.setState({
redirect : true
})
}

renderRedirect(){
if (this.state.redirect) {
return <Redirect to='/target' />
}
}
render() {
return (
<div>
{this.renderRedirect()}
<button onClick={this.setRedirect}>Redirect</button>
</div>
)}

Answer 1

在构造函数中添加setState或定义为类属性

constructor(props) {
super(props);
this.state = {
arr: [],
redirect: false
}
}

或

class abc extends Component {
state = {
arr: [],
redirect: false,
}
}

也

将功能更改为es6或使用绑定

ES6解决方案

setRedirect = () => {
// Code block
}

Answer 2

构造函数

this.state = {
arr: [],
redirect: false
}

在构造函数外部切换重定向标志的函数

setRedirect=()=>{
this.setState({redirect:true})
}

最后你渲染方法

render() {
return (
<div>
{this.renderRedirect()}
<button onClick={this.setRedirect}>Redirect</button>
</div>
)
}

我认为，若您还并没有在constructor中编写setState，那个么就存在绑定this的问题。如果是，那么CCD_ 3有三种方式，使您的CCD_。(以便它可以访问state(。

1. 类似onClick={((=>this.setRedirect.bind(this(}的渲染中的绑定

2. 像这样的构造函数中的绑定

   this.setRedirect = this.setRedirect.bind(this)

3. 最后对setRedirect =()=>{}性能的考虑

因为1,2在每次渲染时都会创建新函数。

Answer 3

您需要像这个一样绑定setDirect函数

class App extends React.Component {
state = {
arr: [],
redirect: false
};
setRedirect() {
this.setState({
redirect: true
})
}

renderRedirect(){
if (this.state.redirect) {
return <Redirect to='/target'/>
}
}
render() {
return (
<div>
{this.renderRedirect()}
<button onClick={this.setRedirect.bind(this)}>Redirect</button> //binding here is important
</div>
)
}
}

或者你必须使用类的构造函数

constructor(props) {
super(props);
this.state = {
arr: [],
redirect: false
}
}

Answer 4

您需要在构造函数内移动状态，并仅在构造函数中绑定setRedirect。

很少有其他建议在渲染中直接绑定它的答案不这样做。始终在构造函数中绑定它

要解决这个问题，主要需要绑定setRedirect函数

constructor(props){
super(props);
this.state = {
arr: [],
redirect: false
};
this.setRedirect = this.setRedirect.bind(this);
}

同时更改

<button onClick={this.setRedirect}>Redirect</button>

至

<button onClick={() => this.setRedirect()}>Redirect</button>

否则，在渲染时调用setRedirect，以防止使用((=>