React 问题 - 期望一个赋值或函数调用，而是看到一个表达式答案

【问题标题】：React issue - Expected an assignment or function call and instead saw an expressionReact 问题 - 期望一个赋值或函数调用，而是看到一个表达式
【发布时间】：2021-04-19 09:54:56
【问题描述】：

我的代码中不断收到错误消息“预期分配或函数调用，而是看到了一个表达式”，我认为这是因为我的地图中有一个 if，但我尝试了几种方法，但我似乎无法使代码工作。

我正在尝试显示从我的 API 返回的信息，但我只想显示 ID 长度等于 7 时已发送的消息。

从我的 API 返回的信息示例

"message_Subjects": [
    {
"subjectId": 1,
        "userId": 1234567,
        "subject": "test subject 1",
        "message_Chain": [
            {
                "messageBody": "TEST",
                "sentFromId": 1234567
            },
            {
                "messageBody": "Reply to the first message from another user",
                "sentFromId": 654321
            }
        ]
    }
}]

这是我的代码

return (
  <div>
    {Data?.message_Subjects?.map((sub) => (
      <ul>
        <li>Subject = {sub.subject}</li>
        {sub.message_Chain.map((chain) => 
          {if(chain.sentFromId.length=== 7) (
          <ul>
            <li>message = {chain.messageBody}</li>
            <li>sent by = {chain.sentFromId}</li>
          </ul> )}
        )}
      </ul>
    ))}
  </div>
);

【问题讨论】：

标签： javascript reactjs expression function-call array.prototype.map

【解决方案1】：

你不能这样混合 javascript 和 jsx

return (
  <div>
    {Data?.message_Subjects?.map((sub) => (
      <ul>
        <li>Subject = {sub.subject}</li>
        {sub.message_Chain.map((chain) => {
          if(chain.sentFromId.length=== 7) (
            <ul>
              <li>message = {chain.messageBody}</li>
              <li>sent by = {chain.sentFromId}</li>
            </ul>
           )
          }
        )}
      </ul>
    ))}
  </div>
);

当不用作箭头函数体时，以下不是正确的javascript指令，而是一个表达式（有值但什么都不做，所以它不能是if语句的主体）：

       <ul>
        <li>message = {chain.messageBody}</li>
        <li>sent by = {chain.sentFromId}</li>
      </ul>

只需添加一个 return 以使其成为表达式（如 if 块中所预期的那样）并允许代码正确编译：

      return (
        <ul>
          <li>message = {chain.messageBody}</li>
          <li>sent by = {chain.sentFromId}</li>
        </ul>
       );

【讨论】：

【解决方案2】：

您应该在这种情况下使用条件渲染：

return (
    <div>
        {Data?.message_Subjects?.map((sub) => (
            <ul>
                <li>Subject = {sub.subject}</li>
                {sub.message_Chain.map(
                    (chain) =>
                        chain.sentFromId.length === 7 && (
                            <ul>
                                <li>message = {chain.messageBody}</li>
                                <li>sent by = {chain.sentFromId}</li>
                            </ul>
                        )
                )}
            </ul>
        ))}
    </div>
);

还有什么，请告诉我

【讨论】：

【解决方案3】：

在您的代码中使用if () 不是有效的conditional rendering。试试看

return (
  <div>
    {Data?.message_Subjects?.map((sub) => (
      <ul>
        <li>Subject = {sub.subject}</li>
        {sub.message_Chain.map(
          (chain) =>
            chain.sentFromId.length === 7 && (
              <ul>
                <li>message = {chain.messageBody}</li>
                <li>sent by = {chain.sentFromId}</li>
              </ul>
            )
        )}
      </ul>
    ))}
  </div>
);

【讨论】：

【解决方案4】：

你需要在你的条件后面加上return。

{
  if(chain.sentFromId.length === 7) {
    return (
          <ul>
            <li>message = {chain.messageBody}</li>
            <li>sent by = {chain.sentFromId}</li>
          </ul>)
  }
}

顺便说一句，最好明确处理else 的情况，例如返回null。

【讨论】：