html - 尝试将函数传递回 App.js 并卡住 REACT

Question

我有一个应用程序，允许我通过输入添加客户列表。我还有另一个组件，它允许我从下拉菜单中选择一个现有客户，并与他们一起创建“新课程”。这样我就可以记录我与客户一起完成的课程。这一切都很完美......这就是我卡住的地方。

每次我添加新课程时，我都想将课程的持续时间（以小时为单位）乘以相应客户的价格。然后，我希望能够显示该利润，并且每次我添加一个新的具有新利润的课程时，我希望它全部加起来为所有课程的总利润。

这是 App.js

import React, { Component } from 'react'
import Clients from './components/Clients'
import AddClient from './components/AddClient'
import NavBar from './components/NavBar'
import AddLesson from './components/AddLesson'
import CalculateIncome from './components/CalculateIncome'

class App extends Component {
  state = {
    clients : [
      // {id : null , name : '', price : null}
    ],
    lessons : [
      // {id: null, name: '', time: null, date :null}
    ],
  }

  deleteClient = (id) => {
    let clients = this.state.clients.filter(client => {
      return client.id !== id
    })
    this.setState({
      clients: clients
    })
  }

  addClient = (newClient) => {
    newClient.id = Math.random();
    let clients = [...this.state.clients, newClient];
    clients.sort((a, b) => a.name.localeCompare(b.name))
    this.setState({
        clients: clients,
    })
  }

  addLesson = (newLesson) => {
    newLesson.id = Math.random();
    newLesson.date = Date();
    let lessons = [...this.state.lessons, newLesson];
    this.setState({
        lessons: lessons,
    })
  }

  render() {
    return (
      <div className="App">
        <NavBar/>
        <Clients clients={this.state.clients} deleteClient={this.deleteClient} lessons={this.state.lessons}/>
        <AddClient addClient={this.addClient}/>
        <AddLesson addLesson={this.addLesson} lessons={this.state.lessons} clients={this.state.clients} income={this.state.income} />
        <CalculateIncome lessons={this.state.lessons} clients={this.state.clients}/>
      </div>
    );
  }
}

export default App;

这是CalculateIncome.js

import React, {Component} from 'react'

class CalculateIncome extends Component {
        state = {
            totalIncome:0
        }

        calculation = () => {
            this.props.lessons.filter(lesson => {
                this.props.clients.filter(client => {
                    if (client.name === lesson.name){
                        let price = client.price
                        let time = lesson.time
                        return(price, time)
                    }
                    return (
                        this.setState({
                            totalIncome : (price * time)
                        })
                    )
                })       
            })
        }

        render() {
            return ( this.props.lessons.length ? 
            (this.state.totalIncome)  
                : 
            (<div className="text-center my-5">You are broke</div>) 
        )
    }
}

export default CalculateIncome

如果您需要查看任何其他组件，包括 AddLesson.js 和 Clients.js，请告诉我，我也会发布它。

标签： htmlreactjscomponentsjsx