来自方法的 div 未在反应 js 的用户界面上呈现

Question

我正在使用 react js 并尝试从 holdingsByAccounts 属性中访问一些虚拟数据。页面加载时，问题 jsx 未呈现到屏幕上。一直在寻找其他方式和其他有这种情况的网站。所以我的代码如下：

  class PortDashSideBar extends Component {
              constructor(props) {
                super(props);
                this.oldPortfolioValue = 0;
              }
            
      getHoldingsForAccount = (id) => {
        this.props.holdingsByAccount.map((holding) => {
          return <span>{holding[id].value}</span>;
        });
      }
    
            
            
              renderConfigurations = () => {
                const {
                  classes,
                  accounts,
                  holdingsByAccount,
                  holdingsByAsset,
                  currentAccountId,
                  actions,
                  user
                } = this.props;
            
                const animationClassGreen = 'animateChangeGreen';
                const animationClassRed = 'animateChangeRed';
            
            
                
            
                return (
                  <Table className={classes.table} name="myConfigurations">
                    <TableBody style={{ display: 'flex', flexDirection: 'column' }}>
                      {
                        accounts.map(account => (
                          <ButtonBase>
                            <TableRow
                              hover
                              name={account.name}
                              key={account.id}
                              onClick={() => { actions.updateAccount(account.id); }}>
                              <TableCell className={classes.cellBotIcon} />
                              <TableCell className={classes.cellName}>
                                <Typography className={classes.botName}>
                                  {account.label}
                                </Typography>
                                <Typography>
                                  <svg className={classes.svg}>
                                    <img src="https://yt3.ggpht.com/ytc/AAUvwngo7rox3GTqcW5Omxr-UGXHwmGO4To3QDygqaYxpg=s900-c-k-c0x00ffffff-no-rj" />
                                  </svg>
                                  <span className={classes.configName}>
                                    {this.getHoldingsForAccount(account.id)}
                                  </span>
                                </Typography>
                              </TableCell>
                            </TableRow>
                          </ButtonBase>
            
                        ))
                      }
                    </TableBody>
                  </Table>
                );
              }
            
              render() {
                const {
                  classes
                } = this.props;
            
                return (
                  <Paper className={classes.paper} elevation={0} square >
                    <Grid container alignItems="center" justify="center">
                      <Grid className={classes.configurations} xs={12} item>
                        {this.renderConfigurations()}
                      </Grid>
                    </Grid>
                  </Paper>
                );
              }
            }
            
            PortDashSideBar.defaultProps = {
            };
            
            PortDashSideBar.propTypes = {
              actions: PropTypes.object.isRequired,
              classes: PropTypes.object.isRequired,
              accounts: PropTypes.array.isRequired,
              holdingsByAccount: PropTypes.array.isRequired,
              holdingsByAsset: PropTypes.array.isRequired,
              currentAccountId: PropTypes.string.isRequired,
              user: PropTypes.object.isRequired
            };
            
            
            function mapStateToProps(state) {
              return {
                user: state.global.user.user,
                holdingsByAccount: state.holdings.holdings.byAccount,
                holdingsByAsset: state.holdings.holdings.byAsset,
                holdingsLoaded: state.holdings.holdings.holdingsLoaded,
                accounts: state.global.accounts.accounts,
                currentAccountId: state.trade.interactions.currentAccountId,
              };
            }
            
            function mapDispatchToProps(dispatch) {
              return {
                actions: {
                  ...bindActionCreators({
                    updateAccount,
                  }, dispatch)
                }
              };
            }
            
            export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PortDashSideBar));

现在，它没有显示错误，但也没有在屏幕上呈现

Answer 1

为了给你一个答案，我认为这是因为你试图通过索引访问数组项，而不是通过项 id，考虑一下：

const array = [1,2,3]
console.log(array[3])
// Prints undefined because the index starts in 0, so the index 3 should be the 4th item which does not exist in this array

因此，您的示例正在尝试访问不存在的索引，这就是崩溃的原因。另外值得一提的是，您的对象 id 属性是基于您上传的图像的字符串，因此如果该字符串不是数字，它也会失败：

const array = [1,2,3]
console.log(array["1"])
// Prints 2 because it parses the string to a number

const array = [1,2,3]
console.log(array["an-id"])
// Prints undefined because the string can't be parsed to a number

所以为了让事情顺利进行，请将代码更改为：

getHoldingsForAccount = (id) => {
 // Use Array.find to find the item that matches the id parameter provided by the function
 const holding = this.props.holdingsByAccount.find((item) => item.id === id)

 // Returns the JSX only if the match was found.
 return holding && (
  <span>{holding.value}</span>
 )
}