json.parse 触发 React / MERN 中的跨域错误

Question

我有一个数据结构，当我console.log它时，它工作得很好：

console.log(JSON.parse([values.category2]).needed_skills);

但是，当我将JSON.parse([values.category2]).needed_skills的结果传递给我的应用程序中的一个组件时，整个事情都会因跨域错误而崩溃。

我不明白为什么，因为我对来自 API 的所有数据启用了 CORS，您甚至可以在请求标头中看到它：

这是 UI 组件（当我在 JSON.parse([values.category2]).needed_skills 的结果上将其设为 map 时）只是因跨域错误而崩溃。：

    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>
      );
    });
    };
  };

真正让我困惑的部分是，我可以在应用程序的其他部分操作完全相同的结果数据 object，甚至不需要JSON.parse结果，但是问题似乎是数据表示本身的潜在问题。

console.log(values.category2.needed_skills); 返回undefined

console.log(JSON.parse([values.category2]).needed_skills)在上面的 UI 组件中返回我需要 map 的内容 - 但由于某种原因，当我在 UI 组件中的 JSON.parse 崩溃时，我不要在 UI 中调用 JSON.parse，一切都很好（除了我不能在数组上使用 map）：

Answer 1

要使 JSON.parse 工作，您必须将其包装在 try-catch 块中。

在您的情况下，它将是：

if(values) {
let category2 = [];
try {
    category2 = JSON.parse([values.category2]);
} catch(e) {console.log(e)}
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>


        {category2.needed_skills && category2.needed_skills.map(...)}
    ...
  );
);