gpt4 book ai didi

javascript - 使用状态设置类 if else 与 React 获取未定义错误的状态

转载 作者:行者123 更新时间:2023-12-03 04:24:24 25 4
gpt4 key购买 nike

我正在尝试根据我发送给组件的专业人员动态设置一个类。不知何故,我收到错误“无法读取未定义的属性‘状态’”。我想当我尝试将状态的类设置为类时,这不存在?在组件的渲染中使用它之前我是否必须重新绑定(bind)它?

var ReactDOM = require('react-dom');
var React = require('react');

class Button extends React.Component {
constructor(props) {
super(props);
console.log("BUTTON")
console.log(props);

this.state = {
class: "small-button"
};

props.options.map(function (option) {
if (option.Description > 10) {
this.setState({
class: "big-button"
});
}
});
console.log("STATE: " + this.state.class);
}

render() {
if (this.props.options) {
return (<div> {
this.props.options.map(function (option) {
return <div className={ this.state.class === 'big-button' ? 'option-button big-button' : 'option-button small-button'} key={option.Id}> {option.Description}</div>
})
}
</div>
)
} else {
return <div>No options defined</div>
}
}
}

module.exports = Button;

最佳答案

这是一个绑定(bind)问题,您需要绑定(bind)函数才能在其中使用this关键字(正确的上下文)。

使用这个:

render() {
if (this.props.options) {
return (<div> {
this.props.options.map((option) => {
return <div className={ this.state.class === 'big-button' ? 'option-button big-button' : 'option-button small-button'} key={option.Id}> {option.Description}</div>
})
}
</div> )
} else {
return <div>No options defined</div>
}
}

查看此答案以了解有关 arrow function and this keyword 的更多详细信息

一个建议:不要将逻辑放在构造函数中,也不要执行setState,为此使用生命周期方法。将该逻辑放入 componentDidMount 方法或 componentWillMount 方法中。

像这样:

class Button extends React.Component {
constructor(props) {
super(props);

this.state = {
class: "small-button"
};
}

componentDidMount(){
this.props.options.forEach((option) => {
if (option.Description > 10) {
this.setState({
class: "big-button"
});
}
});
}

render() {
if (this.props.options) {
return (
<div>
{
this.props.options.map((option) => {
return <div className={ this.state.class === 'big-button' ? 'option-button big-button' : 'option-button small-button'} key={option.Id}> {option.Description}</div>
})
}
</div>
)
}else{
return <div>No options defined</div>
}
}
}

关于javascript - 使用状态设置类 if else 与 React 获取未定义错误的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43804527/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com