У меня есть структура данных, которая, когда я console.log, работает нормально:
console.log(JSON.parse([values.category2]).needed_skills);
Но когда я передаю результат JSON.parse([values.category2]).needed_skills компоненту внутриВ моем приложении происходит сбой с ошибкой перекрестного источника.
Я не могу понять, почему, поскольку я включил CORS для всех своих данных, поступающих из API, вы даже можете увидеть это в заголовках запросов:
Вот компонент пользовательского интерфейса, который (когда я его отображаю на результат JSON.parse ([values.category2]). Required_skills) просто вылетает с ошибкой перекрестного источника .:
if(values) {
return values.skills_required.map((skill, idx) => {
return (
<div className="input-group">
<select
onChange={e => updateSkill(e, idx)}
type="text"
className="form-control">
<option>Select an option...</option>
{JSON.parse([values.category2]).needed_skills && JSON.parse([values.category2]).needed_skills.map((q, w) => {
console.log(JSON.stringify(q));
console.log(w)
return(
<option
key={w}
value={JSON.stringify(q)}>
{JSON.stringify(q)}
</option>
)})}
</select>
<div className="input-group-append">
<button
className="btn btn-outline-danger mb-3"
type="button"
id="button-addon2"
onClick={() => removeSkill(idx)}>x
</button>
</div>
</div>
);
});
};
};
Меня действительно смущает то, что я могу манипулировать точно таким же результирующим объектом данных в других частях приложения, даже не требуя JSON.parseВ результате, однако, проблема, по-видимому, является основной проблемой самого представления данных.
console.log(values.category2.needed_skills); возвращает undefined
console.log(JSON.parse([values.category2]).needed_skills) возвращает именно то, что мне нужно отобразить в моем компоненте пользовательского интерфейса выше - но по какой-то причине, когда я JSON.parse в компоненте пользовательского интерфейса этопроисходит сбой, и когда я не вызываю JSON.parse в пользовательском интерфейсе, все в порядке (за исключением того, что я не могу отобразить массив):
