Question

React props 未定义 - 无法读取未定义的属性“map”

2018-12-05

1226

javascript reactjs

我对这个有点困惑，我开始怀疑它有什么问题，我的眼睛只是呆滞地看着它。我正在用 ingredients: [] 初始化 this.state ，然后将其作为 prop 传递给子组件 <RecipePreview ingredients={this.state.ingredients} instructions={this.state.instructions}/> 。在子组件中，我有以下 this.props.ingredients.map ，它引发以下错误：

myRecipes-d3093398f8879b688ddb.js:41689 Uncaught TypeError: Cannot read property 'map' of undefined

一切似乎都设置正确，所以我不确定错误在哪里。需要注意的一件事是，当我删除地图并简单地渲染 prop 的内容（例如 [1,2,3]）时，它会无错误地呈现。

以下是两个组件。此文件中还有更多组件，但我仅粘贴两个相关组件。请让我知道你们的想法。

class CreateRecipe extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            ingredients: [[1,2,3]],
            instructions: [[]]
        };

        this.addIngredient = this.addIngredient.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    addIngredient(quantity, unit, ingredient) {
        let ingredients = this.state.ingredients;
        ingredients.push([quantity, unit, ingredient]);
        this.setState({ingredients: ingredients})
    };

    handleSubmit = event => {

    };

    validateForm() {
        return this.state.ingredients !== [] || this.state.instructions !== [];
    }

    render() {

        return (
            <div className={"list-container flex-row"}>
                <form onSubmit={this.handleSubmit}>
                    <AddIngredient addIngredient={this.addIngredient}/>
                    <Button block bsSize="small" disabled={!this.validateForm()} type="submit">
                        Add Recipe
                    </Button>
                </form>
                <RecipePreview ingredients={this.state.ingredients} instructions={this.state.instructions}/>
            </div>)
    }
}

class RecipePreview extends React.Component {
    constructor(props) {
        super(props)

    }

    render() {
        return (
            <div>
                Recipe Preview
                {this.props.ingredients.map((ingredient, index) => {
                    return (
                        <div key={`ingredient${index}`}>
                            {`${ingredient[0]} ${ingredient[1]} ${ingredient[2]}`}
                        </div>
                    )
                })}
            </div>
        )
    }
}

Answer 1

您之所以收到此错误，是因为您尝试对未定义的内容调用 map 方法。一种解决方案可能是在映射数组之前检查数组是否存在：

render() {
        return (
            <div>
                Recipe Preview
                {this.props && this.props.ingredients && this.props.ingredients.map((ingredient, index) => {
                    return (
                        <div key={`ingredient${index}`}>
                            {`${ingredient[0]} ${ingredient[1]} ${ingredient[2]}`}
                        </div>
                    )
                })}
            </div>
        )
    }

Answer 2

解决方案

下面的评论让我再次扫描我的组件。我发现另一个组件中有一个重复的 <RecipePreview/> 。事实上，一个组件在我没有传入 prop 的情况下就被渲染了，这就是问题所在。

class ListContainer extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div className={"list-container flex-row"}>
                <MyRecipesList setRecipeAsSelected={this.props.setRecipeAsSelected}
                               selectedRecipe={this.props.selectedRecipe} recipeOwner={this.props.recipeOwner}/>
                <CreateRecipe selectedRecipe={this.props.selectedRecipe}/>
                <RecipePreview/>
                <Instructions/>
                {/*<Advertisements/>*/}
            </div>)
    }
}