[英]React Redux - Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
[英]React Redux - TypeError: Cannot read property 'props' of undefined
我正在将我的代码从基于类的组件迁移到基于函数的组件。 我的代码在基于类的组件中运行良好,但是当我将代码修改为基于函数的组件时,我收到 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
}
在函数组件中,props 作为参数传入。 将 props 作为参数传递给组件,并在引用 props 时使用 props。 而不是 this.props
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { InputData } from '../store/action/action.js';
const FirstPage = props => {
const [inputState, setInputState] = useState('');
const getInputText = () => {
var text = document.getElementById('inputText').value;
setInputState(text);
props.inputData(text);
}
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.