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

Question

我一直得到错误信息"期望一个赋值或函数调用，而不是看到一个表达式";在我的代码，我认为这是因为我有一个如果在我的地图，但我已经尝试了几种方法，我似乎不能使代码工作。

我试图显示从我的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>
);

Answer 1

您需要在您的条件后面加上return

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

顺便说一下，最好显式地处理else的情况，例如通过返回null。

Answer 2

不能这样混合使用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>

只需添加一个返回，使其成为表达式(如if块中所期望的那样)，并允许代码正确编译:

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

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

Answer 4

在这种情况下应该使用条件呈现:

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

还有什么问题请告诉我