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

如何解决反应问题 - 期望一个赋值或函数调用，而是看到一个表达式

我一直在我的代码中收到错误消息“期望一个赋值或函数调用，而是看到一个表达式”，我认为这是因为我的地图中有一个 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>
);

解决方法

您需要在条件后添加 return。

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

顺便说一句，最好显式处理 else 情况，例如返回 null。

,

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

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>
);

还有什么，请告诉我

,

您不能以这种方式混合使用 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>
       );

,

在您的代码中使用 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>
);