реагировать родительский компонент сложить значения от дочернего не точно

Question

Эй, у меня есть многократно используемый компонент списка, в который я могу добавлять элементы и добавлять сумму цен, и я хочу, чтобы этот компонент был в родительском компоненте, где у меня есть сумма сумм и кнопка для добавления других списков. Как я могу получить суммы? На данный момент я получаю их и добавляю в массив, но значения не такие, какими они должны быть.

Код:

import React from 'react';
import styled from 'styled-components';
import ShoppingList2 from './ShoppingList2';

const Container = styled.div `
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

class TotalPrice extends React.Component {
  state = {
    shoppingLists2: [ShoppingList2],
    shoplistsums: [],
    sum: 0
  }

  AddShoppingList = () => {
    let shoppingLists2 = this.state.shoppingLists2.concat(ShoppingList2);
    this.setState({
      shoppingLists2
    })
    console.log(this.state.shoppingLists2);
  }

  onUpdate = (val) => {
    console.log('val', val);
    let shoplistsums = this.state.shoplistsums.concat(val);
    console.log('shpl', shoplistsums);
    let sum = shoplistsums.reduce(function(a, b) {
      return a + b;
    });
    this.setState({
      shoplistsums,
      sum
    })
  }

  render() {
    return (
      <div>
        {this.state.shoppingLists2.map((shoppingList, index)=>(
          <ShoppingList2
            key={index}
            value={this.onUpdate}
          />
        ))}
        <Container>
          <label>Total:</label>
          <label>{this.state.sum + ' €'}</label>
          <button onClick={this.AddShoppingList}>Add Receipt</button>
        </Container>
      </div>
    );
  }
}

export default TotalPrice;

дочерний компонент

import React from 'react';
import styled from 'styled-components';
import InputFields from './InputFields';

const Container = styled.div `
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

class ShoppingList extends React.Component {

  state = {
    questions: [''],
    sum: 0
  }

  handleText = i => e => {
    let questions = [...this.state.questions];
    questions[i] = parseInt(e.target.value);
    if (questions.length === 1 && isNaN(questions[0])) {
      questions[0] = ''
    }
    let sum = questions.reduce(function(a, b) {
      if (isNaN(a)) {
        a = '';
      }
      if (isNaN(b)) {
        b = '';
      }
      return a + b;
    });
    console.log('sum', sum);
    this.props.value(sum);
    this.setState({
      questions,
      sum
    })
  }

  addExpense = e => {
    e.preventDefault()
    let questions = this.state.questions.concat([''])
    this.setState({
      questions
    })
  }

  render() {
    return (
      <div>
        <Container>
          <select>
            <option value="food">Food</option>
            <option value="houseware">Houseware</option>
            <option value="entertainment">Entertainment</option>
          </select>
          <button onClick={this.addExpense}>Add expense</button>
        </Container>
        {this.state.questions.map((question, index) => (
          <Container  key={index}>
            <input
              type="text"
            />
            <input
              type="number"
              onChange={this.handleText(index)}
              value={question}

            />
          </Container>
        ))}
        <Container>
          <label>Total:</label>
          <label>{this.state.sum ? this.state.sum + ' €' : 0 + ' €'}</label>
        </Container>
      </div>
    )
  }
}

export default ShoppingList;

Answer 1

{this.state.shoppingLists2.map((shoppingList, index)=>(
  <ShoppingList2
    key={index}
    value={this.onUpdate}
  />
 ))}

Здесь вы используете несколько компонентов списка покупок, но воспроизводите только тот, который вы импортировали. Вместо этого используйте этот

{this.state.shoppingLists2.map((ShoppingList, index)=>(
  <ShoppingList
    key={index}
    value={this.onUpdate}
  />
 ))}

Следующая проблема заключается в том, что вы отправляете значения (суммы) из вашего дочернего компонента. И суммирование сумм, когда вы должны суммировать отдельные числа в соответствии с вашим кодом.

Я немного изменил твой код. И сохраняется значение (сумма) согласно индексу компонента. И, наконец, суммировал их за

вот полный компонент

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import ShoppingList2 from "./ShoppingList2";

const Container = styled.div`
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

class TotalPrice extends React.Component {
  state = {
    shoppingLists2: [ShoppingList2],
    shoplistsums: {},
    sum: 0
  };

  AddShoppingList = () => {
    let shoppingLists2 = this.state.shoppingLists2.concat(ShoppingList2);
    this.setState({
      shoppingLists2
    });
    console.log(this.state.shoppingLists2);
  };

  onUpdate = index => val => { // changed here
    console.log("val", val);
    let shoplistsums = { // and here
      ...this.state.shoplistsums,
      [index]: val
    };
    console.log("shpl", shoplistsums);
    // and this block, using reduce would do as well, but I like this method better
    let sum = 0; 
    Object.keys(shoplistsums).forEach(key => {
      sum += shoplistsums[key];
    });
    this.setState({
      shoplistsums,
      sum
    });
  };

  render() {
    return (
      <div>
        {this.state.shoppingLists2.map((ShoppingList, index) => (
          <ShoppingList key={index} value={this.onUpdate(index)} /> /* changed here */
        ))}
        <Container>
          <label>Total:</label>
          <label>{this.state.sum + " €"}</label>
          <button onClick={this.AddShoppingList}>Add Receipt</button>
        </Container>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<TotalPrice />, rootElement);