Question

React Redux-TypeError：无法读取未定义的属性“props”

2020-11-11

500

javascript reactjs redux react-redux react-hooks

我正在将我的代码从基于类的组件迁移到基于函数的组件。我的代码在基于类的组件中运行良好，但是当我将代码修改为基于函数的组件时，我收到 TypeError：无法读取未定义的属性“props”。我的基于类的组件代码如下：

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);

Answer 1

函数组件中没有 this

const FirstPage = ({ inputData }) => {
const [inputState, setInputState] = useState('');

const getInputText = () => {
    var text = document.getElementById('inputText').value;
    setInputState(text);
    inputData(text);  // <-- Look here
}

Answer 2

在函数组件中，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);