javascript - React Redux - TypeError:无法读取未定义的属性“道具”
问题描述
我正在将我的代码从基于类的组件迁移到基于函数的组件。我的代码在基于类的组件中运行良好,但是当我将代码修改为基于函数的组件时,我收到 TypeError: Cannot read property 'props' of undefined。我的基于类的组件代码如下:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { InputData } from '../store/action/action.js';
class FirstPage extends Component {
constructor() {
super();
this.state = {
inputState: ''
}
}
getInputText() {
var text = document.getElementById('inputText').value;
this.setState({ inputState: text });
this.props.inputData(text);
}
render() {
const { inputState } = this.state;
return (
<div>
<p>Type Something</p>
<input id="inputText" type="text"></input>
<button style={{ marginLeft: '10px' }} onClick={() =>
this.getInputText()}>Submit</button>
<p>You Wrote : {inputState}</p>
<br /><br />
<Link to="/second"><button>Go to Second Page</button></Link>
</div>
);
}
}
function mapStateToProp(state) {
return ({
// Get data from store
})
}
function mapDispatchToProp(dispatch) {
return ({
// Send data to store
inputData: (data) => { dispatch(InputData(data)) }
})
}
export default connect(mapStateToProp, mapDispatchToProp)(FirstPage);
我的基于函数的组件代码如下:
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { InputData } from '../store/action/action.js';
const FirstPage = () => {
const [inputState, setInputState] = useState('');
const getInputText = () => {
var text = document.getElementById('inputText').value;
setInputState(text);
this.props.inputData(text); // **** THE ERROR IS APPEARING BECAUSE OF THIS LINE ****
}
return (
<div>
<p>Type Something</p>
<input id="inputText" type="text"></input>
<button style={{ marginLeft: '10px' }} onClick={getInputText}>Submit</button>
<p>You Wrote : {inputState}</p>
<br /><br />
<Link to="/second"><button>Go to Second Page</button></Link>
</div>
);
}
function mapStateToProp(state) {
return ({
// Get Data from Store
})
}
function mapDispatchToProp(dispatch) {
return ({
// Send data to Store
inputData: (data) => { dispatch(InputData(data)) }
})
}
export default connect(mapStateToProp, mapDispatchToProp)(FirstPage);
解决方案
this
功能组件中没有
const FirstPage = ({ inputData }) => {
const [inputState, setInputState] = useState('');
const getInputText = () => {
var text = document.getElementById('inputText').value;
setInputState(text);
inputData(text); // <-- Look here
}
推荐阅读
- python - 无法使用 ctype 在 python 中加载 .dll
- php - 从 OneToMany 类别实体上的 Doctrine 数据库结果生成多维数组的递归函数
- python - 不再满足条件时调用具有 lock.aquire() 的函数
- android - 删除 TextInput 下划线 React-Native
- google-sheets - 按降序使用 SORT() 时排除空单元格
- azure-functions - Azure 持久功能扩展
- c - Gtk 在按钮单击时显示和隐藏容器
- asp.net-mvc-5 - 上传图片的挑战。其他信息正在提交到数据库,但图像未上传
- vba - 将数组添加到集合
- swift - 如何避免 Mojave 上的 Safari 扩展程序崩溃?