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

Question

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

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

对于这种情况你应该使用条件渲染：

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 3

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

Answer 4

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

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

React issue - Expected an assignment or function call and instead saw an expression

javascript

reactjs

expression

function-call

array.prototype.map