Блог

Эй, ребята, у меня есть объект, который содержит ключ в виде состояний и его значение в виде массива городов, для которых я хочу выполнить цикл в методе рендеринга и показать данные

Например, мой объект похож

 {
A:{cities:[0,1,2,3]},
B:{cities:[0,1,2,3]}
}
  

итак, в методе рендеринга я вызвал

 render(){
{this.renderAllStates()}
}
  

и затем

 renderAllStates = () => {
    console.log(data);
    // let parsedData=JSON.parse(states)
    for (let [key, value] of Object.entries(data)) {
      console.log(key, value.cities);
     return <Collapsible trigger={key}>
        <p>
          This is the collapsible content. It can be any element or React
          component you like.
        </p>
        <p>
          It can even be another Collapsible component. Check out the next
          section!
        </p>
      </Collapsible>;
    }
  };
  

таким образом, это отображает только первое состояние внутри моего компонента, потому что я использую

Возврат

но тогда, если я не использую return, он говорит

Ожидалось назначение или вызов функции, а вместо этого появилось выражение no-unused-expressions

итак, мой вопрос в том, где я должен использовать ключевое слово return method здесь?

Если вы хотите отобразить несколько элементов, вы должны вернуть массив или фрагмент React. В этом случае массив имеет смысл:

 renderAllStates = () => {
    return Object.entries(data).map(([key, value]) =>
        <Collapsible key={key} trigger={key}>
            <p>
                This is the collapsible content. It can be any element or React
                component you like.
            </p>
            <p>
                It can even be another Collapsible component. Check out the next
                section!
            </p>
        </Collapsible>
    );
};
  

Обратите внимание, что я добавил key свойство, поскольку это записи в массиве. React нужен ключ для отслеживания изменений в массиве.

Чтобы получить все элементы, вам нужно сохранить их в массиве и вернуть. Лучше использовать функцию .map следующим образом.

 renderAllStates = () => (
  Object.keys(data).map((key) => (
     <Collapsible trigger={key}>
      <p>
        This is the collapsible content. It can be any element or React
        component you like.
      </p>
      <p>
        It can even be another Collapsible component. Check out the next
        section!
      </p>
    </Collapsible>
 ))
)
  

Для значения используйте data[ключ].

Я надеюсь, что это сработает для вас.