React - 额外 table 行打印不正确

Question

我正在遍历对象数组，然后根据条件在一个 Table 或另一个中显示该行。但是，当我调用该条件时，该对象会按照我的意愿做出反应（它显示在 Table1 中），但在 Table2 中也会打印出一个数字。以下是一个片段示例。 files 包含对象数组 person。如果这个人是男性，他们将被添加到一个数组中，并且该数组被传递到一个单独的组件并在别处呈现，这有效。如果此人不是男性，则返回条件下的 table。

<tbody>
{props.files.map(person=> ( 
    <div>
        {(person.gender === "male") ? maleArray.push(person) :
            <tr>
                <td>{person.name}</td>
                <td>{person.age}</td>
            </tr>
         }
    </div>
))}
</tbody>

问题是，每次检测到男性时，它们不会显示在女性 table 中，而是打印一个数字。例如，

Name	Age
Mary	51
1
Jane	19

男性 table 按预期工作，但如果在循环中检测到男性，我会在女性 table 中得到此输出。

编辑： Table 在最终版本中打印很奇怪。它看起来像这样
姓名年龄
玛丽 51
1
简 19

Answer 1

Array.Map 对数组的每个元素执行操作并取 return 值。

maleArray.push(person) return如果成功则为 1，因此将呈现 1 而不是值。

您可以在 forEach-loop 中创建一个 male- 和一个 female-array 并映射这些数组。

Answer 2

在 JSX 中你使用三元运算符，当执行完成时它总是 returns 值，并且返回值被传递给标记。因此，当循环在“女性”table 上执行时，连同女性名字，它会显示在数组上执行 push 方法的结果，而不是男性名字，这是一个数组长度，这就是为什么你在 table。尽量在一个组件里把男名和女名分开，而不是在JSX里，然后就不用在JSX里放条件了

React - 额外 table 行打印不正确

React - Extra table row printing incorrectly

javascript

reactjs

html-table

conditional-rendering