Реагировать - ошибка «Не является функцией» при передаче функции в качестве реквизита функциональному компоненту

Question

Я относительно новичок в React и работаю над списком задач в стиле Приложение для рецептов . Я задал предыдущий вопрос здесь о рефакторинге функционального компонента, чтобы ингредиенты рецепта отображались в отдельных строках, а не в виде одного однострочного абзаца.

Я реализовал предложенные изменения и использовал вторую функцию .map для итерации по ингредиентам и успешно заставил их отображаться в отдельных строках. Однако после внесения изменений я получаю сообщение об ошибке, когда пользователь нажимает кнопку редактирования и пытается редактировать ингредиенты рецепта.

Компонент функции (Item.js), который обрабатывает отображение названий рецептов и ингредиентов, выглядит следующим образом:

import React from 'react';
import Button from 'react-bootstrap/lib/Button';


const Item = (props) => (
  <div>
    <div className="Recipe-Item-Container" key={props.text}>
      {props.items.map((item, index) => {
        return (
        <div className="Recipe-Item" key={index}>
          <h3>{item}</h3>

        // This p and the map function within it were the changes I made
        <p className="ingredients-list">
          {props.ingredients[index].map((ingredient, ingredientIndex) => {
            return (
              <div className="ingredient" key={ingredient}>
                {ingredient}
              </div>
            )
          })}
        </p>

        <div className="buttons-container">
          <Button className="edit-button" onClick={() => props.edit(item, index)}>Edit</Button>
          <Button className="delete-button" onClick={() => props.delete(item, index)}>Delete</Button>
          </div>
        </div>
      );
    }
  )}
  </div>
</div>
)

export default Item;

Теперь, когда я нажимаю кнопку редактирования и пытаюсь редактировать список ингредиентов, я получаю эту ошибку:

Вот мой компонент App.js, который хранит состояние и передает данные в Item.js:

import React, { Component } from 'react';
import Item from './Item';
import './App.css';
import ModalComponent from './Modal.js';
import Button from 'react-bootstrap/lib/Button';
import EditModalComponent from './EditModal.js';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: ["Pumpkin Pie", "Spaghetti", "Onion Pie"],
      ingredients:[
        ["Pumpkin Puree ", "Sweetened Condensed Milk ", "Eggs ", "Pumpkin Pie Spice ", "Pie Crust "],
        ["Noodles ", "Tomato Sauce ", "(Optional) Meatballs "],
        ["Onion ", "Pie Crust "]
      ],

      // Recipe name and ingredients
      inputVal: '',
      ingredientVal: '',
      // Recipe name and ingredients when user is editing existing recipe
      inputValEdit: '',
      ingredientValEdit: '',
      // Controls whether forms are displayed or hidden
      showRecipeForm: false,
      showRecipeEditForm: false,
      // Index to select which recipe item is being edited
      editingIndex: ''
    };

  }

  // Get text user inputs for recipes
  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };


  // When user submits recipe this adds it to the list
  onSubmit = (event) => {
    event.preventDefault()
    this.setState({
      items: [...this.state.items, this.state.inputVal],
      ingredients: [...this.state.ingredients, this.state.ingredientVal],
      showRecipeForm: false
    });
  }

  onEditSubmit = (event) => {
    event.preventDefault();
    const {items, ingredients, inputValEdit, ingredientValEdit, editingIndex} = this.state;

    // Selects proper recipe item to edit
    items[editingIndex] = inputValEdit;
    ingredients[editingIndex] = ingredientValEdit;

    this.setState({
      items: items,
      ingredients: ingredients,
      inputVal: '',
      ingredientVal: '',
      showRecipeEditForm: false
    });
  }

  closeRecipeForm = () => {
    this.setState({
      showRecipeForm: false,
      showRecipeEditForm: false
    });
  }

  // Shows recipe
  AddRecipe = (bool) => {
    this.setState({
      showRecipeForm: bool
    });
  }

  // Is called when one of the edit recipe buttons is clicked, shows RecipeEditForm
  edit = (item, index) => {
    this.setState({
      showRecipeEditForm: !this.state.showRecipeEditForm,
      editingIndex: index
    });
  }

  // Deletes recipe item from the list
  delete = (item, index) => {
     this.setState({
      ingredients : this.state.ingredients.filter((_, i) => i !== index),
      items: this.state.items.filter((_, i) => i !== index)
    });
  }


  render() {
    return (
      <div className="container">
        <h1>Recipe List</h1>


        <ModalComponent
          inputVal={this.state.inputVal}
          handleChange={this.handleChange}
          ingredientVal={this.state.ingredientVal}
          onSubmit={this.onSubmit}
          addRecipe={this.addRecipe}
          showRecipeForm={this.state.showRecipeForm}
          closeRecipeForm={this.closeRecipeForm}
        />

        <EditModalComponent
          inputValEdit={this.state.inputValEdit}
          handleChange={this.handleChange}
          ingredientValEdit={this.state.ingredientValEdit}
          onEditSubmit={this.onEditSubmit}
          closeRecipeForm={this.closeRecipeForm}
          addRecipe={this.addRecipe}
          showRecipeEditForm={this.state.showRecipeEditForm}
        />


        <Item
          items={this.state.items}
          ingredients={this.state.ingredients}
          edit={this.edit}
          delete={this.delete}
        />

      <Button className="add-recipe-button" onClick={this.AddRecipe}>Add New Recipe</Button>

      </div>
    );
  }

}

Почему я получаю эту ошибку в Item.js, когда пользователь пытается редактировать список ингредиентов? Я думаю, что это включает в себя функцию onEditSubmit, но я не уверен.

Answer 1

Итак, я видел, что в вашем onEditSubmit вы делаете это:

ingredients[editingIndex] = ingredientValEdit; // line 57

Ваши компоненты в состоянии на самом деле являются массивом массивов (многомерных). Это так:

ingredients:[
        ["Pumpkin Puree ", "Sweetened Condensed Milk ", "Eggs ", "Pumpkin Pie Spice ", "Pie Crust "],
        ["Noodles ", "Tomato Sauce ", "(Optional) Meatballs "],
        ["Onion ", "Pie Crust "]
      ],

Но после этой строки кода ваш массив становится примерно таким: Я ввел «Куриный леденец» в качестве ингредиента, например.

ingredients:[
        "Chicken Lollipop",
        ["Noodles ", "Tomato Sauce ", "(Optional) Meatballs "],
        ["Onion ", "Pie Crust "]
      ],

Итак, значение по индексу, который был выбран, становится строкой, а не массивом. В этом случае значение индекса 0 теперь является строкой.

Таким образом, ваша функция рендеринга в Item.js прерывается, так как она пытается отобразить строку, которую она не может.

Чтобы исправить это, вы можете изменить строку 57 на эту:

ingredients[editingIndex] = [ingredientValEdit];

Теперь каждая запись будет правильно храниться в виде массива, и ваш код должен работать. Обновленный массив будет выглядеть так:

ingredients:[
        ["Chicken Lollipop"],
        ["Noodles ", "Tomato Sauce ", "(Optional) Meatballs "],
        ["Onion ", "Pie Crust "]
      ]

Дополнительный контент (не требуется для этого ответа):

Однако, поскольку вам всегда нужно, чтобы ингредиенты были массивом, вы также можете разделить входные значения, используя разделитель, например:

Пользователь ввел ингредиенты как: «Леденец, конфета, что-то»

В вашей строке 57 вы также можете сделать это:

ingredients[editingIndex] = ingredientValEdit.split(',');