1

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

我见过很多人对“this”关键字的绑定有问题，我想我做对了，但是我仍然收到错误“无法读取未定义的属性'props'”。

我的 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);
}
4

1 回答 1

3

尝试更换

<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);
    }
于 2017-12-05T16:15:06.943 回答