TypeError: w.map не является функцией

Я получаю данные об ошибке в ответе

TypeError: w.map is not a function
    at Object.children (1649264715696-bundle.js:1:42168)

Вот мои данные, которые я читаю с входа.

[{"username": "user1","goal": "$5,000,200"},{"username":"user2","goal": "$4,000,199" },{ "username":"user2","goal": "$4,000,198"}]

У меня есть строка и анализ объекта

вот фрагмент моего кода

const WeatherWidget = ({ id, editMode }) => {
 
  const [roles, setRoles] = useState([]);

  const validateJSON = (json = "") => {
   try {
     return JSON.parse(JSON.stringify(json));
   } catch (error) {
     return null;
   }
  }

 useEffect(() => {
    const setDataRole = (data) => {
      setRoles(data);
    }

    if (widgetApi && settings.jsonData) {
      var arr = validateJSON(settings.jsonData);
      setDataRole(arr);
    }
  }, [settings, widgetApi, editMode])

  return (
    <Container>
      <StyledUl>
        <Ticker>
          {({ index }) => (
            <>
              {roles.map(({ username, goal }, i) => (
                <>
                  {i === 0 ? null : ','}
                  <StyledSpanName>
                    <span className="name">{username}</span>
                  </StyledSpanName>
                    <StyledSpanGoal> <span className="goal">{goal}</span>. 
                 </StyledSpanGoal>
                </>
              ))
              }
            </>
          )}
        </Ticker >
      </StyledUl>
    </Container>
  );
};

если я скопирую данные и вставлю их прямо в setDataRole(the_data), это сработает

Пожалуйста, дайте мне знать, как решить эту проблему.

либо добавьте roles && перед roles.map, либо верните [] в улове validateJSON

gyan roy 06.04.2022 19:31

Спасибо. Я только что сделал и получил тот же результат

user2570135 06.04.2022 19:39

что ты сделал? добавить роли && ?

gyan roy 06.04.2022 19:46

извините.. измените строку на {roles && roles.map(({ имя пользователя, цель }, i) => (

user2570135 06.04.2022 19:47
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
4
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Можешь попробовать это

roles?.map((etc…)) 

Другие вопросы по теме