Question

我对这个感到有些困惑，我开始怀疑它是什么，我的目光正掠过它。我正在使用this.state初始化ingredients: []，然后将其作为道具传递给子组件<RecipePreview ingredients={this.state.ingredients} instructions={this.state.instructions}/>。在子组件中，我有以下this.props.ingredients.map，它引发以下错误：

myRecipes-d3093398f8879b688ddb.js：41689未捕获的TypeError：无法读取未定义的属性“地图”

一切似乎都设置正确，所以我不确定错误在哪里。要注意的一件事是，当我删除地图并简单地渲染道具的内容（例如[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/>。问题出在我没有传递道具的情况下。

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

React道具未定义-无法读取未定义的属性“地图”

2 个答案: