Реагировать Добавить элемент с оператором распространения

Question

У меня вопрос о том, как реагировать на добавление и редактирование элементов. Я хочу добавить объект в массив (объект, который содержит количество, количество, размер, имя в массиве) console.log в порядке, но объект не был добавлен.В моей форме не может показать результат этой функции.Я хочу добавить новый объект списка ингредиентов из API.Я не знаю, есть ли у меня плохие реквизиты или состояния

import React, { Component } from "react";
import {
  FormGroup,
  FormControl,
  ControlLabel,
  InputGroup
} from "react-bootstrap";
export default class AddIngredient extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ingredients: [],
      amount: " ",
      amountUnit: " ",
      name: " "
    };
  }

  onChangeAmount = e => {
    this.setState({ amount: e.target.value });
    console.log("amount was changed");
  };

  onChangeAmountUnit = e => {
    this.setState({ amountUnit: e.target.value });
    console.log("amount unit was changed");
  };
  onChangeName = e => {
    this.setState({ name: e.target.value });
    console.log("name was changed");
  };

  onClickAddIngredient = e => {
    const { amount, amountUnit, name } = this.state;
    const newIngredient = { amount, amountUnit, name };
    this.setState({ ingredients: [...this.state.ingredients, newIngredient] });

    console.log("was added");
  };

  render() {
    const { amount, amountUnit, name } = this.props;
    return (
      <React.Fragment>
        <FormGroup>
          <ControlLabel>Přidat ingredienci</ControlLabel>
          <InputGroup className="frow">
            <FormControl
              type="number"
              placeholder="Množství"
              min="0"
              value={amount}
              onChange={this.onChangeAmount}
            />
            <FormControl
              type="text"
              placeholder="Jednotka"
              value={amountUnit}
              onChange={this.onChangeAmountUnit}
            />
          </InputGroup>
          <InputGroup>
            <FormControl
              type="text"
              placeholder="Název"
              value={name}
              onChange={this.onChangeName}
            />
            <InputGroup.Addon>
              <button onClick={this.onClickAddIngredient} className={"addon"}>
                Přidat
              </button>
            </InputGroup.Addon>
          </InputGroup>
        </FormGroup>
      </React.Fragment>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { Component } from "react";

import IngredientItems from "./IngredientItems";
import AddIngredient from "./AddIngredient";
import Directions from "./Directions";
import { FormGroup, Button, ButtonGroup, Grid } from "react-bootstrap";
import BasicInfo from "./BasicInfo";
export default class RecipeForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title || "",
      servingCount: props.servingCount,
      preparationTime: props.preparationTime,
      sideDish: props.sideDish,
      directions: props.directions,
      ingredients: props.ingredients
    };
  }

  onChange = (key, value) => {
    this.setState({ [key]: value });
  };

  render() {
    const { onCancel } = this.props;
    const {
      ingredients,
      title,
      servingCount,
      sideDish,
      preparationTime,
      directions
    } = this.state;

    return (
      <Grid>
        <ButtonGroup
          className="pull-right"
          size="lg"
          aria-label="Basic example"
        >
          <Button onClick={this.onSave} bsStyle="success">
            Uložit
          </Button>
          <Button onClick={onCancel} bsStyle="default">
            Zrušit
          </Button>
        </ButtonGroup>
        <BasicInfo
          title={title}
          preparationTime={preparationTime}
          servingCount={servingCount}
          sideDish={sideDish}
          onChange={this.onChange}
        />
        <IngredientItems ingredients={ingredients} />
        <Directions directions={directions} onChange={this.onChange} />
        <AddIngredient onChange={this.onChange} />
        <FormGroup />
      </Grid>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

У вас есть локальное состояние ingredients в вашем AddIngredient компоненте, но оно на самом деле никогда не отображается.

Похоже, вы хотите передать обработчик этому компоненту, который обновляет ingredient массив в родительском компоненте.

AddIngredient.js

onClickAddIngredient = e => {
  const { amount, amountUnit, name } = this.state;
  const newIngredient = { amount, amountUnit, name };

  // call handler from parent and update there
  this.props.onAdd(newIngredient);

  console.log("was added");
};

RecipeForm.js

onAddIngredient = (newIngredient) => {
  this.setState({ ingredients: [...this.state.ingredients, newIngredient] });
};

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

<AddIngredient onAdd={this.onAddIngredient} />

Затем вы можете удалить локальное состояние ingredients в подкомпоненте, поскольку он не используется.