Блог

Я продолжаю получать сообщение об ошибке «Ожидал назначения или вызова функции, а вместо этого увидел выражение» в моем коде, я думаю, это потому, что у меня есть if внутри моей карты, но я попробовал несколько способов, и, похоже, я не могу заставить код работать.

Я пытаюсь отобразить информацию, возвращенную из моего API, но я хочу отображать сообщения, которые были отправлены только тогда, когда длина идентификатора равна 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 , например.

Вы не можете смешивать 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>
       );
 

В вашем коде использование 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 amp;amp; (
              <ul>
                <li>message = {chain.messageBody}</li>
                <li>sent by = {chain.sentFromId}</li>
              </ul>
            )
        )}
      </ul>
    ))}
  </div>
);
 

В этих случаях вы должны использовать условный рендеринг:

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

Если что-нибудь еще, дайте мне знать