Блог

Я пытаюсь создать элемент div для каждого элемента в массиве, используя reactjs JSX. Я не был уверен, как на самом деле это сделать, но я попытался сделать это:

 {results.forEach(element => {
               <div className={classes.SearchResults}>

                {results[element]}    

                </div>

})}
 

Это не сработало, но я вполне уверен, что это что-то в этом роде. Я не получаю никаких результатов ошибок — это элемент массива, который я определил в другом месте, и он работает полностью. Единственная проблема заключается в отображении нового элемента div для каждого из элементов в массиве результатов.
Если вам нужно больше кода, я с радостью дам вам его, хотя я думаю, что этого должно быть достаточно.

Закрыть.

Во-первых, вы хотите .map() , а не .forEach() . Последний просто выполняет итерацию, но ничего не возвращает, тогда как первый возвращает новый массив (того же размера, что и исходный), «сопоставленный» с новой структурой элементов (в данном случае элементов JSX).

Помимо этого… Использование фигурных скобок {} здесь создает тело функции, которое в данном случае состоит из элемента JSX, но ничего не возвращает:

 {
  <div className={classes.SearchResults}>
    {results[element]}    
  </div>
}
 

Вы можете вернуть элемент явно:

 {
  return (<div className={classes.SearchResults}>
    {results[element]}    
  </div>);
}
 

Или используйте неявный возврат из функции arrow, используя круглые скобки () вокруг него, чтобы вся функция была только одним оператором (вместо явного тела функции):

 (
  <div className={classes.SearchResults}>
    {results[element]}    
  </div>
)
 

Дополнительно…Использование results[element] здесь выглядит неправильно. Первым аргументом обратного .map() вызова является не индекс, а сам элемент. Я подозреваю, что вы этого хотите:

 (
  <div className={classes.SearchResults}>
    {element}    
  </div>
)
 

В качестве последнего замечания, в React вы увидите предупреждения, если вы выполняете итерацию по такому массиву, чтобы создать JSX, но не предоставляете key свойство элементу JSX. Если у element объекта есть идентификатор, такой как id свойство, вы можете использовать это:

 (
  <div key={element.id} className={classes.SearchResults}>
    {element}    
  </div>
)
 

Но в противном случае вы всегда можете положиться на второй аргумент .map() обратного вызова, который является просто индексом элемента массива:

 {results.map((element, i) => (
  <div key={i} className={classes.SearchResults}>
    {element}    
  </div>
))}
 

Вы близки, но здесь вы используете неправильный метод массива. Array.map() возвращает новый массив, и вы можете использовать его для возврата массива divs для рендеринга для каждого элемента в results массиве.

Для получения более подробной информации посмотрите здесь: https://reactjs.org/docs/lists-and-keys.html

forEach просто запускает обратный вызов, игнорируя возвращаемое значение

map используется для преобразования и возврата нового значения для каждой итерации, поэтому вместо этого вы можете использовать следующее:

 {results.map((element, index) => {
   return (
      <div className={classes.SearchResults} key={index}>
          {results[element]}    
      </div>
   )
})}