javascript - 删除每个项目后为值显示 null

Question

我正在使用反应，我已经实现了一个删除功能。该功能应该删除该项目。它完成了删除项目的工作，但是，在删除每个项目后，显示的值都将显示为空。我认为这是没有呈现选定项目（在这种情况下为帐户项目）的结果。我想知道如何默认使用帐户项目或执行类似于默认设置的操作。我试过做 componentDidMount 并在那里设置帐户。然而，它没有做这项工作。请看我的代码。谢谢

import React, { Component, Fragment } from 'react';
import { Typography, withStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import MenuItem from '@material-ui/core/MenuItem';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import AddAccount from '../common/addAccount';
import { updateAccount } from '../../store/ducks/trade/interactions';
import PortDashFaq from './portDashFaq';
import AccountTypeIcon from './AccountTypeIcon';
import Formatted from './formatted';
import { getChangeColor, formatChangePct } from '../../utils/helpers';
import DeleteAccount from './../common/deleteAccount';

  getHoldingsForAccount = (id) => {
    const {
      theme
    } = this.props;

    const { pref_currency: prefCurrency } = this.props.user.preferences;
    const holding = this.props.holdingsByAccount.find(item => item.id === id);

    return holding && (
      <div style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>
        <Typography color="textSecondary" className={this.props.classes.value} name="portfolioValue">
          <Formatted convertToPref asset={prefCurrency} amount={holding.value} />
        </Typography>
        <Typography className={this.props.classes.value} style={{ color: getChangeColor(holding.change24h, theme), paddingLeft: '5px' }} name="24HourChange">
          {`(${formatChangePct(prefCurrency, holding.percentChange)})`}
        </Typography>
      </div>

    );
  }

  getAccountById = (id) => {
    const { accounts } = this.props;
    return accounts.find(a => a.id === id);
  }

  setCurrentAccount = (id) => {
    const { actions } = this.props;
    actions.updateAccount(id);
  }

  switchView = (event) => {
    if (this.props.currentAccountId !== event.target.value) {
      const id = event.target.value !== 'aggregate' ? event.target.value : '';
      this.props.actions.updateAccount(id);
    }
  };



       handleMouseEnter = (id) => {
         this.setState({
           hoverId: id,
           isHovering: true,
         });
       }

       handleMouseLeave = () => {
         this.setState({
           isHovering: false
         });
       }

  renderAccounts = () => {
    const {
      classes,
      holdingsByAccount,
      currentAccountId,
      user,
      theme
    } = this.props;

    const { pref_currency: prefCurrency } = user.preferences;
    const portfolioSummary = this.aggregateHoldings('');

    console.log(this.props)

   
          {
            holdingsByAccount.map(account => (
              <MenuItem
                className={account.id === currentAccountId ? classes.selectedAccount : classes.unselectedAccount}
                hover
                onMouseEnter={() => this.handleMouseEnter(account.id)}
                onMouseLeave={() => this.handleMouseLeave()}
                name={account.name}
                key={account.id}
                onClick={ () => this.setCurrentAccount(account.id) }>
                <TableCell className={classes.cellAccountIcon}>
                  <AccountTypeIcon type={(this.getAccountById(account.id) || {}).type} />
                </TableCell>
                <TableCell className={classes.cellName}>
                  <Typography className={classes.accountName}>
                    {account.label}
                  </Typography>
                  <Typography style={{ display: 'flex', justifyContent: 'space-between' }}>
                    {this.getHoldingsForAccount(account.id)}
                    <div className={classes.deleteIcon}>
                      {this.state.isHovering && this.state.hoverId === account.id ? <DeleteAccount key={account.id} setCurrentAccount={this.setCurrentAccount} accountId={account.id} accountLabel={account.label} /> : '' }
                    </div>
                  </Typography>
                  
                </TableCell>
              </MenuItem>
            ))
          }
        </TableBody>
      </Table>
    );
  }



PortDashSideBar.defaultProps = {
  currentAccountId: ''
};


export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(PortDashSideBar));

标签： javascriptreactjsnullundefinedlifecycle