Блог

Я сопоставляю данные в возвращенном рендеринге, но затем я хочу выполнить условие для данных, которые были сопоставлены… Возможно ли сделать что-то подобное?

 export default function App() {
  const prod = [
    {'name': '1'},
    {'name': '2'},
    {'name': '3'}
  ];

  return (
    <div className="App">
      {prod amp;amp; (
        <div>
          {prod.map(p => (

            // This is the point I get an error
            {p.name === '1' amp;amp; (
              <h1>This is 1</h1>
            )}

          ))}
        </div>
      )}
    </div>
  );
}
 

В настоящее время я получаю сообщение об ошибке:

 Unexpected token, expected "," (16:14)

  14 |         <div>
  15 |           {prod.map(p => (
> 16 |             {p.name === '1' amp;amp; (
     |               ^
 

Функции со стрелками с форматом x => () возвращают содержимое скобок.

Таким образом, вы возвращаете то, что компилятор считает объектом, поскольку оно заключено в фигурные скобки x => ({ ... }) Вам нужно удалить фигурные скобки:

 prod.map(p => (
    p.name === '1' amp;amp; <h1>This is 1</h1>
)
 

Или явно возвращает значение:

 prod.map(p => {
    return p.name === '1' amp;amp; <h1>This is 1</h1>
}
 

Если вы хотите сопоставить данные для какого-либо конкретного индекса, вы можете проверить это.

 <div>
    {prod.map(p => p.name === '1' amp;amp; <h1>Conditionally Mapped</h1> || <h1>Normally mapped</h1>}
</div>

// similar to the previous one

<div>
    {prod.map(p => {
      if(p.name === '1') return <h1>Conditionally Mapped</h1>
      else return <h1>Normally mapped</h1>
    }

</div>