Question

我是React的新手，请记住这一点。

我见过很多人对“this”关键字的绑定存在问题，我认为我做对了，但是我仍然收到错误“无法读取属性”道具'of undefined“。

我的React + Redux应用程序出了问题，但我无法弄清楚是什么。

这是我的代码： Recipes_list.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getRecipe } from "../actions/index";

class RecipeList extends Component {
    constructor(props) {
        super(props);
        this.functionGetRecipe = this.functionGetRecipe.bind(this);
    }

    functionGetRecipe(recipe_id){
        this.props.getRecipe(recipe_id);
    }

    renderRecipes(recipeData) {     
        const publisher = recipeData.publisher;
        const recipe_id = recipeData.recipe_id;
        const title = recipeData.title;
        const source_url = recipeData.source_url;
        const image_url = recipeData.image_url;

        return (
            <tr onClick={this.props.functionGetRecipe(recipe_id)} key={recipe_id}>
                <td>{publisher}</td>
                <td>{title}</td>
                <td><a href={source_url}>View on original website</a></td>
                <td><img className="img-fluid" src={image_url} /></td>
            </tr>
        );
    }

    render() {
        if (!this.props.recipes) {
            return <div>Nothing to show yet</div>;
        }
        return (
            <table style={{width: "50%"}} className="table table-hover float-right">
                <thead>
                    <tr>
                        <th>Publisher</th>
                        <th>Title</th>
                        <th>Source</th>
                        <th>Image</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.recipes.map(this.renderRecipes)}
                </tbody>
            </table>    
        );
    }
}

function mapStateToProps(state){
    return { recipes: state.searchRecipes.recipes };
}

function mapDispachToProps(dispatch) {
    return bindActionCreators({ getRecipe }, dispatch);
}

export default connect(mapStateToProps, mapDispachToProps)(RecipeList);

当使用值数组（this.props.recipes）重新呈现此容器/组件时，Chrome的控制台会记录以下错误：

Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
at renderRecipes (bundle.js:36675)
at Array.map (<anonymous>)
at RecipeList.render (bundle.js:36746)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:7779)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:7799)
at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (bundle.js:1530)
at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:7752)
at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:7736)
at ReactCompositeComponentWrapper.updateComponent (bundle.js:7665)
at ReactCompositeComponentWrapper.wrapper [as updateComponent] (bundle.js:1530)

感谢任何帮助。谢谢。

注意：如果删除与Action相关的所有代码，一切正常，表格会正确显示

============================================ ==================================

编辑：将onClick = {this.props.functionGetRecipe（recipe_id）}修改为onClick = {this.functionGetRecipe（recipe_id）} 返回给我以下错误：

bundle.js:36675 Uncaught (in promise) TypeError: Cannot read property 'functionGetRecipe' of undefined

以防万一，这是我的/actions/index.js：

import axios from 'axios';
const API_KEY = "***********************************";
export const GET_URL = `https://food2fork.com/api/get?key=${API_KEY}`;
export function getRecipe(recipeId) {
    const url = `${GET_URL}&Id=${recipeId}`;
    const request = axios.get(url);

    return {
        type: GET_RECIPE,
        payload: request
    };
}

============================================ ==================================

EDIT2：就是这样，现在它起作用了。这是改变：

constructor(props) {
    super(props);
    this.renderRecipes = this.renderRecipes.bind(this);
}

Answer 1

尝试替换

<tr onClick={this.props.functionGetRecipe(recipe_id)} key={recipe_id}>

通过：

<tr onClick={this.functionGetRecipe(recipe_id)} key={recipe_id}>

修改：我认为声明你的方法functionGetRecipe()没用，你可以直接使用this.props.getRecipe(recipe_id)

编辑2：尝试绑定renderRecipes：

constructor(props) {
        super(props);
        this.renderRecipes = this.renderRecipes.bind(this);
    }

React Redux - Uncaught（in promise）TypeError：无法读取未定义的属性'props'

1 个答案: