javascript - 在 React 中两次使用相同组件时的意外行为

问题描述

我有两个对象incs，exps每个对象都有属性desc：amount和id。我想将容器中每个对象的详细信息显示为列表，并且两个容器是并排的。我是这样做的

const Details = props => {
  return (
    <div className={styles.container}>
      <div className={styles.detailsItem}>
        <ul>
          {props.balance.incs.map(inc => (
            <DetailsItem item={inc} key={inc.id}/>
          ))}
        </ul>
      </div>

      <div className={styles.detailsItem}>
        <ul>
          {props.balance.exps.map(exp => (
            <DetailsItem item={exp} key={exp.id}/>
          ))}
        </ul>
      </div>
    </div>
  );
};

由哪里DetailsItem.js给出

const DetailsItem = ({item}) => {
  return (
    <li className={styles.listItem}>
      <div>{item.desc}</div>
      <div>{item.amount}</div>
    </li>
  )
}

该.scss文件是

.container {
  width: 80%;
  max-width: 800px;
  margin: 1rem auto;
  padding: 1rem 0;
  text-align: center;
  display: flex;
  justify-content: space-around;
  .detailsItem {
    width: 49%;
    background: #eee;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    h2{
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .listItem {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 2rem;
      padding: 0.5rem 0;
    }
    li:nth-child(even) {
      background: rgb(219, 217, 217);
    }
  }
}

对象incs和exps通过表格填写。但是当我添加一个incs条目时，exps容器的增长量与incs容器的增长量相同，尽管如果条目数exps为 0 或小于中的条目数，incs反之亦然。见附图。这不是期望的结果。为什么会发生这种情况，以及如何使每个容器仅根据其对象的大小增长？

标签： javascriptreactjs

javascript - 在 React 中两次使用相同组件时的意外行为

问题描述

解决方案

推荐阅读