Реактивируйте роутер l oop и возвращайте

Question

Я пытаюсь вернуть мои маршруты из массива, используя l oop. У меня есть файл приложения. js, где мой код выглядит следующим образом:

  return (          
      <Switch>
        <Route path="/" component={() => <HomePage />} exact />
        <Route path="/chooseStyles" component={FormContainer} />
        <Route path="/heightAndWeight" component={FormContainer} />
        <Route path="/bodyShape" component={FormContainer} />
        </Switch>
);

Я пытаюсь сделать мои маршруты динамическими c и l oop через массив. Но я не могу заставить это работать. Для этого я пытаюсь этот код:

return (          
      <Switch>
         {a.map((b,i) => <Route path={b[i].url} component={() => <Global_Container name={a[0].path} />}  />)}
        <Route path="/" component={() => <HomePage />} exact />
        <Route path="/chooseStyles" component={FormContainer} />
        <Route path="/heightAndWeight" component={FormContainer} />
        <Route path="/bodyShape" component={FormContainer} />
        </Switch>
);

Используя код выше, я получаю ошибки. Я создал переменную, которая называется как:

var a = [{"url":"/global","path":"maternityFit"},
            {"url":"/global1","path":"clothFit"}
        ]

Мой код работает нормально, когда я использую такой код:

  {a.map((b,i) => <Route path={a[0].url} component={() => <Global_Container name={a[0].path} />}  />)}

Я не знаю, как заставить его работать в моем случае. Я объявляю мою переменную в кодовом блоке:

export default function App() {
  var a = [{"url":"/global","path":"maternityFit"},
            {"url":"/global1","path":"clothFit"}
        ]
}

Answer 1

Функция map используется неправильно. b имеет текущее значение массива, вы не должны делать b.[index]. b уже является результатом выполнения a[index]; просто используйте его вместо этого. Документация по map.

Вместо этого вам следует сделать следующее:

{a.map((b) => (
  <Route path={b.url} component={() => <Global_Container name={b.path} />}  />
  //           ^ b is the object not array                     ^ Use b here instead of a
))}

Для дальнейшей визуализации происходящего рассмотрите следующее:

var myArray = [{ val1: 'foo' }, { val1: 'bar' }]

myArray.map((obj, index) => {
  console.log('myArray: ', myArray); // Still the full array
  console.log('obj: ', obj); // The current value in the loop
  console.log('index: ', index); // The current index in the loop
});

Итак, проблема заключалась в том, что вы пытались использовать obj, как если бы это было myArray. Но вместо этого вы можете пропустить дополнительные символы ввода myArray[index] и просто использовать obj.