为什么我在 React 中遇到跨源错误？

Question

I am quite new in React. I have build an event scheduler web app but it's only working in my browser if I try it to different browsers or someone else system it gives me this error:

A cross-origin error was thrown. React doesn't have access to the actual error object in development.

I am trying to figure out but all I can understood it's happening because I am giving default values in state if local storage in undefined. Here is my complete code .

This is the component that is getting the error:

import React from "react";
import { Container, Row, Table } from "react-bootstrap";
import EventModal from "./EventModalButton";

class EventList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      eventtype: "",
      time: ""
    };
  }

  componentDidMount() {
    const defaultData = {
      title: "AI",
      eventtype: "Workshop",
      time: "02:00PM"
    };
    const eventData = JSON.parse(localStorage.getItem("Data") || defaultData);
    this.setState({
      title: eventData.title,
      eventtype: eventData.eventtype,
      time: eventData.time
    });
  }

  render() {
    return (
      <Container fluid="md">
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>Title</th>
              <th>Type</th>
              <th>Time</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{this.state.title}</td>
              <td>{this.state.eventtype}</td>
              <td>{this.state.time}</td>
              <td>Monday, 31/08/2020</td>
            </tr>
          </tbody>
        </Table>

        <Container className="row" />
        <Row className="justify-content-center">
          <EventModal />
        </Row>
      </Container>
    );
  }
}
export default EventList;

Answer 1

You're trying to parse an object. JSON.parse expects a JSON but you're passing an object.

You could check the sandbox here

 componentDidMount() {
    const defaultData = {
      title: "AI",
      eventtype: "Workshop",
      time: "02:00PM"
    };
    
    // JSON.parse throws an error when parsing the object.
    const eventData = JSON.parse(localStorage.getItem("Data")) || defaultData;
    this.setState({
      title: eventData.title,
      eventtype: eventData.eventtype,
      time: eventData.time
    });
  }