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 的结果时）只是因跨域错误而崩溃。：

    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) 准确返回我需要在上面的 UI 组件中映射的内容 - 但是由于某种原因，当我在 UI 组件中进行 JSON.parse 时它崩溃了，并且当我 不 调用 JSON 时。在 UI 中解析，一切都很好（除了我无法映射数组）：

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