reactjs - React TypeError:无法解构属性,因为它未定义
问题描述
这段代码有问题吗?
class App extends React.Component {
constructor(props) {
super(props);
this.state ={
name: '',
gender: '',
age: '',
};
}
componentWillMount() {
const { steps } = this.props;
const { name, gender, age } =steps;
this.setState({ name, gender,age });
}
错误显示如下:
它不是在this.state
上面的块中定义的吗?
完整代码在这里:
应用程序.js
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
age: '',
};
}
componentWillMount() {
const { steps } = this.props;
const { name,age } = steps;
this.setState({ name, age });
}
render() {
const { name, age } = this.state;
return (
<div>
<h3>Summary</h3>
<table>
<tbody>
<tr>
<td>Name</td>
<td>{name.value}</td>
</tr>
<tr>
<td>Age</td>
<td>{age.value}</td>
</tr>
</tbody>
</table>
</div>
);
}
}
SimpleForm.js
const steps = [
{
id: '1',
message: 'What is your name?',
trigger: 'name',
},
{
id: 'name',
user: true,
trigger: '5',
},
{
id: '5',
message: 'How old are you?',
trigger: 'age',
},
{
id: 'age',
user: true,
trigger: '7',
},
{
id: '7',
message: 'Great! Check out your summary',
trigger: 'review',
},
{
id: 'review',
component: <App />,
asMessage: true,
end: true,
}
]
class simpleForm extends React.Component {
render() {
return (
<ChatBot steps={steps} />
)
}
}
export default simpleForm;
解决方案
错误很明显。您没有向 App 组件发送任何道具,因此 { steps } 未定义,并且您无法解构属性“steps”,因为它未定义。
推荐阅读
- python - 如何将一个模型的字段值分配给另一个模型的字段?
- xml - 在 Nest.js 中获取 Post 请求正文中的 XML
- javascript - jQuery 表单提交按钮根据选中的复选框转到 URL
- javascript - react-spring:使用 useChain 进行缩放和翻译
- vue.js - Vue2 - 路由级别的延迟加载不起作用?
- r - 如何仅针对每个文件中的某些值组合多个 .RDS 文件?
- c++ - 在 C++ 中运行项目时出现未定义的引用错误
- visual-studio - 您好,我有一个使用 specflow 用 c# 编写的自动化框架
- python - 如何并行计算天体运动?
- c++ - 如何转发声明在单独的头文件中相互引用的结构?