Codesandbox.io 引發了跨域錯誤問題

Question

當我嘗試執行此代碼時，Codesanbox.io 中出現“拋出跨域錯誤”錯誤。 請問我該怎么辦？ 我在 codesanbox.io 中使用 Create-react-app

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
  state = {
    customer: [
      { id: 1, name: "Leon" },
      { id: 1, name: "Lea" },
      { id: 1, name: "Vanelle" }
    ]
  };
  render() {
    const title = "Customer list";
    const elements = this.state.customer.map();
    return (
      <div className="App">
        <h1>{title}</h1>
        <ul>
          <li>
            Philippe <button>X</button>
          </li>
        </ul>
        <form>
          <input type="text" placeholder="Add a customer" />
          <button>Confirm</button>
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您的render函數應該map到狀態中找到的每個customer 。 只是調用this.state.customer.map()會拋出一個錯誤，它似乎沒有被codesandbox正確處理。

試試這個為你的渲染：

render() {
    const title = "Customer list";
    return (
      <div className="App">
        <h1>{title}</h1>

        <ul>
        {
          this.state.customer.map(c => (
            <li key={c.id}>
             {c.name} <button>X</button>
            </li>
          ))
        }
        </ul>
        <form>
          <input type="text" placeholder="Add a customer" />
          <button>Confirm</button>
        </form>
      </div>
    );
  }

Answer 2

可能是codeandbox的錯？ 你在這里讀過嗎： https : //github.com/codesandbox/codesandbox-client/issues/667

通常，跨源錯誤是您可以在后端而不是前端（瀏覽器）中控制的。 我懷疑你在代碼中調用了一些你不應該有權在瀏覽器中調用的 API。 CORS 是一個完整的閱讀主題。 要真正理解，我認為你應該花一些時間來消化它。