Javascript 将状态设置为在react中返回另一个状态的函数
我有两个Javascript 将状态设置为在react中返回另一个状态的函数,javascript,reactjs,binding,Javascript,Reactjs,Binding,我有两个状态,一个状态设置为数字,另一个设置为函数,该函数返回第一个状态。我收到错误消息: 未捕获的TypeError:无法读取未定义的属性“count” 以下是片段: constructor(props) { super(props); this.state = { count: 5, date: this.full() }; }; full = () => { return this.state.count; };
状态
,一个状态
设置为数字,另一个设置为函数
,该函数返回第一个状态。我收到错误消息:
未捕获的TypeError:无法读取未定义的属性“count”
以下是片段:
constructor(props) {
super(props);
this.state = {
count: 5,
date: this.full()
};
};
full = () => {
return this.state.count;
};
这是代码笔链接:
我认为绑定可能有问题,但我还没能解决
谢谢你,你做错了。在构造函数中指定给this.state的值在初始呈现之前不可用。如果要使用其他状态值设置状态,而不是在componentWillMount
或componentDidMount
方法中执行此操作
如果您这样做:
full = () => {
return 5;
};//it will work.
因此解决方案是,
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 5,
date: ""
};
this.full = this.full.bind(this);
};
componentWillMount ()
{
this.setState({date:this.full()})
}
full = () => {
return (this.state.count);
};
render() {
console.log(this.state)
return (
<h2>{this.state.date}.</h2>
);
}
}
ReactDOM.render(<Clock />, document.getElementById('root'));
类时钟扩展React.Component{
建造师(道具){
超级(道具);
此.state={
计数:5,
日期:“”
};
this.full=this.full.bind(this);
};
组件将安装()
{
this.setState({date:this.full()})
}
完整=()=>{
返回(this.state.count);
};
render(){
console.log(this.state)
返回(
{this.state.date}。
);
}
}
ReactDOM.render(,document.getElementById('root'));
你做错了。在构造函数中指定给this.state的值在初始呈现之前不可用。如果要使用其他状态值设置状态,而不是在componentWillMount
或componentDidMount
方法中执行此操作
如果您这样做:
full = () => {
return 5;
};//it will work.
因此解决方案是,
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 5,
date: ""
};
this.full = this.full.bind(this);
};
componentWillMount ()
{
this.setState({date:this.full()})
}
full = () => {
return (this.state.count);
};
render() {
console.log(this.state)
return (
<h2>{this.state.date}.</h2>
);
}
}
ReactDOM.render(<Clock />, document.getElementById('root'));
类时钟扩展React.Component{
建造师(道具){
超级(道具);
此.state={
计数:5,
日期:“”
};
this.full=this.full.bind(this);
};
组件将安装()
{
this.setState({date:this.full()})
}
完整=()=>{
返回(this.state.count);
};
render(){
console.log(this.state)
返回(
{this.state.date}。
);
}
}
ReactDOM.render(,document.getElementById('root'));
将日期设置为这样的值:“this.full()”,您就会意识到在状态定义中调用函数可能是错误的方法,您想怎么做@Tom Fenech他试图将状态设置为状态定义内函数的结果。我可以阅读语法:)我不知道这将是什么目的。任何可以使用this.state
的地方都可以调用this.full
,如果需要的话。无论如何,这里有一把工作小提琴,看看它,你可能会发现问题:将日期设置为这样:“this.full()”你会意识到在你的状态定义中调用函数可能是做你想做的事情的错误方式你为什么要这样做@Tom Fenech他试图将状态设置为状态定义内函数的结果。我可以阅读语法:)我不知道这将是什么目的。任何可以使用this.state
的地方都可以调用this.full
,如果需要的话。无论如何,这里有一把工作小提琴,看看它,你可能会意识到问题所在。谢谢,我会在得到足够的分数后立即投票:)没问题。你明白错误的原因吗?如果是的话,你可以接受答案。谢谢,我会在得到足够的分数后立即投票:)没问题。你明白错误的原因吗?如果是,你可以接受答案。