Не работает функция в React

Question

Не работает функция onAddNewProduct когда передаю ей параметры. Без параметров работает и добавляет товар,только пустой.

import React, { Component } from 'react';
import './App.css';
import ProductTable from './dz1/ProductTable/ProductTable';
import AddProductForm from './dz1/ProductForm/AddProductForm'

class App extends Component {

  state = {
    products:[
      {
        name: 'Рис',
        categories: 'Еда',
        price:'10$',
        count: '1',
      },
      {
        name: 'Йогурт',
        categories: 'Десерт',
        price:'11$',
        count: '2',
      },
      {
        name: 'Персик',
        categories: 'Фрукт',
        price:'12$',
        count: '3',
      },
    ],
    newProduct: {
      name:'',
      categories: '',
      price: '',
      count: '',
    },
  };

  addProduct = (newProductTest) => {
    const { products, newProduct } = this.state;

    this.setState({
      products: [...products, newProduct],
      newProduct: newProductTest,
    })
  }

  render() {

    const products = this.state.products;

    return (
      <div>
        <table>
          <tr>
            <th>Название</th>
            <th>категория</th>
            <th>цена</th>
            <th>остаток</th>
            <th>действие</th>
          </tr>
          {
            products.map((item,i) => <ProductTable product={item} key={i}/>)
          }
        </table>
        <AddProductForm onAddProduct={this.addProduct} products={products}/>
      </div>
    )

  }
}

export default App;

import React, { Component } from 'react';


export default class AddProductForm extends Component {

  state = {
    products: this.props.products,
    newProduct: {
      name:'',
      categories: '',
      price: '',
      count: '',
    }
  }

  onChangeName = (e) => {
    this.setState({
      newProduct: {
        name: e.target.value,
      }
    })
  }

  onChangeCategories = (e) => {
    this.setState({
      newProduct: {
        categories: e.target.value,
      }
    })
  }

  onChangePrice = (e) => {
    this.setState({
      newProduct: {
        price: e.target.value,
      }
    })
  }

  onChangeCount = (e) => {
    this.setState({
      newProduct: {
        count: e.target.value,
      }
    })
  }

  render() {
    const { products, newProduct } = this.state;

    return (
      <div>
        <form>
          <h2>Добавить новый товар</h2>
          <input id="name" value={newProduct.name} onChange={this.onChangeName} type='text' placeholder='Название'/>
          <input value={newProduct.categories} onChange={this.onChangeCategories} type='text' placeholder='Категория'/>
          <input value={newProduct.price} onChange={this.onChangePrice} type='text' placeholder='Цена'/>
          <input value={newProduct.count} onChange={this.onChangeCount} type='text' placeholder='Количество'/>
          <button type="button" onClick={this.props.onAddProduct(newProduct)}>Добавить товар</button>
        </form>
      </div>
    )
  }
}

@meine Я её в компоненте передаю – Ihor Stoner Sep 08 '20 at 14:14 — Ihor Stoner, Sep 08 '20 at 14:14

score 1 · Accepted Answer · answered Sep 09 '20 at 05:26

Если вы путаетесь со стейтами, не делите пока на два компонента.

Поймите, где передается ссылка на функцию, а где результат ее вызова.

Можно использовать функциональный компонент и хуки, получится короче, и не надо бороться с this:

const [categories,setCategories] = useState("")
....
const [products,setProducts] = useState([])
const addProduct = () => setProducts(wasProducts=>[
   ...wasProducts, {name,price,count,categories}
])
....
    onChange={ev=>setCategories(ev.target.value)}
    ....
    onClick={ev=>addProduct()}

Не работает функция в React

1 Answers1