Реагировать на объединение двух компонентов и сортировку данных по дате и времени (самые новые вверху, самые старые и внизу)

Чтобы свести к минимуму изменения вашего кода, я бы предложил добавить еще одно состояние под названием row и использовать componentDidUpdate для прослушивания изменений состояний expenses и incomes для обновления состояния row.

import axios from 'axios';
import React, { Component } from 'react'
import ExpenseRow from './ExpenseRow';
import IncomeRow from './IncomeRow';

class IncomeExpenseSummary extends Component {

    constructor(props) {
        super(props);
        this.state = {
            expenses:[],
            incomes:[],
            rows: []
        }
    }
   
    componentDidUpdate(prevProps, prevState) {
       //trigger when incomes or expenses change
       if (prevState.incomes !== this.state.incomes || prevState.expenses !== this.state.expenses) {
          //add type to recognize `income` in mixed list
          const updatedIncomes = [...this.state.incomes].map(income => ({...income, type: 'income'})) 
          //add type to recognize `expense` in mixed list
          const updatedExpenses = [...this.state.expenses].map(expense => ({...expense, type: 'expense'})) 
          //sort all rows with the mixed list
          const sortedRows = [...updatedExpenses, ...updatedIncomes].sort((a,b) => new Date(b.created_at) - new Date(a.created_at)) 
          this.setState({ rows: sortedRows })
       }
    }

    componentDidMount(){
        this.getExpenseList();
        this.getIncomeList();
    }

    getExpenseList = () =>{
        //if you use an arrow function, you don't need to pass variable for `this`
        axios.get('/get/expenses',{
            params:{_limit: 3}
        }).then((response) => {
            this.setState({
                expenses: response.data
            });
        });
    }

    getIncomeList =() =>{
        //if you use an arrow function, you don't need to pass variable for `this`
        axios.get('/get/incomes',{
            params:{_limit: 3}
        }).then((response) => {
            this.setState({
                incomes: response.data
            });
        });
    }

    render(){
        return(
            <div>
                <table className = "table"> 
                {/* <toast/> */}
                <thead>
                    <tr>
                        <th scope = "col">Date</th>
                        <th scope = "col">Name</th>
                        <th scope = "col">Price</th>
                        <th scope = "col">Category</th>
                    </tr>
                </thead>
      <tbody>
            {this.state.rows.map((row) => row.type === 'expense' ? <ExpenseRow data = {row} key = {row.title}/> : <IncomeRow data = {row} key = {row.title}/>)}
      </tbody>
            </table>
            </div>
    );
    }
  }


export default IncomeExpenseSummary;

Если вы не беспокоитесь о рендеринге повторяющихся данных, это должно сработать для вас. Я просто объединил два состояния, отсортировал их по дате и передал это вашему новому объединенному компоненту ExpenseIncomeRow. Если вы на самом деле пытаетесь объединить данные на основе свойств key/value, то это решение может вам не подойти.

import axios from 'axios';
import React, { Component } from 'react'
import ExpenseIncomeRow from './ExpenseIncomeRow';

class IncomeExpenseSummary extends Component {

    constructor(props) {
        super(props);
        this.state = {
            expenses:[],
            incomes:[],
        }
    }

    componentDidMount(){
        this.getExpenseList();
        this.getIncomeList();
    }

    sortByDate = (data) => {
        data.sort((a, b) => new Date(b['created_at']) - new Date(a['created_at']))
    }

    getExpenseList =() =>{
        let self=this;
        axios.get('/get/expenses',{
            params:{_limit: 3}
        }).then(function(response)
            {self.setState({
                expenses: response.data
            });
        });
    }

    getIncomeList =() =>{
        let self=this;
        axios.get('/get/incomes',{
            params:{_limit: 3}
        }).then(function(response)
            {self.setState({
                incomes: response.data
            });
        });
    }


    render(){
        return(
            <div>
                <table className = "table"> 
                {/* <toast/> */}
                <thead>
                    <tr>
                        <th scope = "col">Date</th>
                        <th scope = "col">Name</th>
                        <th scope = "col">Price</th>
                        <th scope = "col">Category</th>
                    </tr>
                </thead>
                <tbody>
                {this.sortByDate(this.state.expenses.slice(0, 4).concat(this.state.incomes.slice(0, 4)).map(function(x, i){
                    return <ExpenseIncomeRow key = {i} data = {x} />
                }))}
            </tbody>
            </table>
            </div>
        );
    }

}

export default IncomeExpenseSummary;

Вот новый компонент:

import React, { Component } from 'react'


class ExpenseIncomeRow extends Component {
    render(){
        return (
            <tr className='alert alert-success'>
                <th>{this.props.data.created_at}</th>
                <td>{this.props.data.title}</td>
                <td>{this.props.data.amount}</td>
                <td>{this.props.data.category}</td>
            </tr>
        )
    }
}
export default ExpenseIncomeRow;

Я изменил ваш imports, но на самом деле вам придется настроить новый компонент на вашей стороне, чтобы он работал правильно.

Я предлагаю добавить помощника zip():

// Zip array arguments together.
//
//     zip([1, 2, 3], [4, 5, 6])
//     //=> [[1, 4], [2, 5], [3, 6]]
//     zip([1], [2, 3], [])
//     //=> [[1, 2, undefined], [undefined, 3, undefined]]
//
function zip(...arrays) {
  if (!arrays.length) return [];
  const length = Math.max(...arrays.map(array => array.length));
  return Array.from({ length }, (_, i) => arrays.map(array => array[i]));
}

Если вы уже используете библиотеку со вспомогательными функциями (Underscore.js, Lodash, Ramda и т. д.), велика вероятность, что через нее доступна эта функция.

Затем вы можете использовать его в своем JSX следующим образом:

// moved taking the first 3 elements up, to simplify the JSX
const take = (n, array) => array.slice(0, n + 1);
const expenses = take(3, this.state.expenses);
const incomes = take(3, this.state.incomes);

// ...

<tbody>
  {zip(expenses, incomes).map(([expense, income], i) => (
    <>
      <ExpenseRow key = {i} data = {expense} />
      <IncomeRow key = {i} data = {income} />
    </>
  ))}
</tbody>

Это решение предполагает, что HTTP-запрос возвращает элементы в правильном порядке. Если это не так, вам нужно сначала отсортировать оба массива.

Если длина expenses и incomes может быть разной. Скажем, expenses имеет длину 1, а incomes имеет длину 3. Тогда вы, вероятно, захотите добавить дополнительную проверку как для expenses, так и для incomes (в примере показано только expenses).

{expense && <ExpenseRow key = {i} data = {expense} />}

Или вы можете вернуть null в ExpenseRow, если данные не предоставлены.

class ExpenseRow extends Component {
    render() {
        if (!this.props.data) return null;
        // ...
    }
}