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