只有一个函数得到结果

Question

我有这两个函数被调用，但只有第二个函数显示在桌子上。

<table className="tableList tableList--space">

     <thead>{this.tableHead()}</thead>

     <tbody>

          {this.state.products.map((item) =>

               this.tableBody(item) && this.tableBodyComplements(item)

          )}

     </tbody>

</table>

功能：

tableBody = (item) => (

    <tr key={item.title}>

        <td className="text-left">

            {item.title}

        </td>

        <td className="text-left"> - </td>

        <td className="text-right">R$ {item.price}</td>

        <td className="text-center">{item.quantity}X</td>

        <td className="text-right">R$ {item.total}</td>

        <td className="text-left"></td>

    </tr>

);

tableBodyComplements = (item) => (

    <tr>

        <td className="text-right"> 

            {item.ComplementCategories.map(aux => {

                return aux.Complements[0].title

            })} 

        </td>

        <td className="text-right"> - </td>

        <td className="text-right"> - </td>

        <td className="text-right"> 

            {item.ComplementCategories.map(aux => {

                return aux.Complements[0].quantity

            })} 

        </td>

        <td className="text-right">R$ {item.total}</td>

        <td className="text-right"></td>

    </tr>

);

为什么只有第二个得到了想要的结果？我不知道是否只调用了第二个，或者它与表中的第一个重叠，我怎样才能更好地理解并修复它？

Answer 1

您当前的实现正在执行所谓的“短路”，基本上只要第一个值计算为真值，第二个值就会被返回，否则它可能会返回undefined。要修复您的实现，它应该是这样的：<table className="tableList tableList--space">&nbsp; &nbsp; &nbsp;<thead>{this.tableHead()}</thead>&nbsp; &nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.products.map((item) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.tableBody(item)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.tableBodyComplements(item)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp;</tbody></table>

Answer 2

运算&&符实际上不会同时返回两者。如果第一个参数为 true，则返回第二个参数，否则返回 false。例如：function Example() {&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{"Word1" && "Word2"}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;) // this displays ONLY "Word2", since "Word1" is not a false value.}要解决此问题，请将它们包装在片段中：&nbsp;{this.state.products.map((item) =>&nbsp;&nbsp; &nbsp; &nbsp;<React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; {this.tableBody(item)}&nbsp; &nbsp; &nbsp; &nbsp; {this.tableBodyComplements(item)}&nbsp; &nbsp; &nbsp;</React.Fragment>&nbsp;)}

Answer 3

在 javascript 中，任何形式的表达式a && b或者a || b只会计算为或 a。b从来没有两者兼而有之。事实上，甚至不清楚评估“两者a和b”的一般含义是什么。在你的例子中，你想将两个元素渲染为 JSX - 所以只需将它们放在一起，包装在 a 中，Fragment这样它就是一个合法的 React 元素：{this.state.products.map((item) =>&nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.tableBody(item)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.tableBodyComplements(item)}&nbsp; &nbsp; </React.Fragment)}