更新 React state 变量会引发跨域错误

Question

Context

At the moment I am working on a project where I want to get data, more specifically a list/Array of Strings, from my Python API and display that list with React. I am getting the list and it looks completely fine. No undefined values, everything is a String and it really is an Array . So the retrieved data appears to be valid . After retrieving the data I want to set it as a state variable in React so that I can pass it to another component as a prop.

I am using pywebview as a React GUI for my Python application. The JavaScript modules are being bundled by webpack.

Error

Whenever I call setCourses() I am getting the following error and React shows a whitescreen.

Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/docs/cross-origin-errors.html for more information.

What I have noticed/tried

• when calling setCourses(["foo0", foo1", "foo2"]); this error is not thrown.
• when calling setCourses(new Array(response)); it does not throw an error but somehow joins the Arrays elements to a new Array with the size of 1: ["foo0", "foo1", "foo2"] -> ["foo0,foo1,foo2"].
• iterating over the Array and constructing a new one + checking that every element is a String
• the error page of React mentioned using the cheap-module-source-map setting in case one is using webpack. Setting this didn't help either.

Similar questions (which didn't solve my poblem)

• Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development
• Correct modification of state arrays in React.js
• I can't update state for array item in react native

Simplified code snippet

As you can see below, I am fetching the data from the Python API in a useEffect hook and trying to set the state which shall rerender my component so that the child component <CourseList courses={courses} /> will display the courses.

 export default function Dashboard(props) { // some props etc. were removed to keep this snippet simple // the state variable which causes issues const [courses, setCourses] = React.useState([]); // get Data from Python API React.useEffect(()=>{ getData(); }, []); /** * Gets the needed data (login status, courses, username) by calling the Python API */ function getData() { window.pywebview.api.foo().then((foo) => { // do stuff }).then(() => { // fetch the courses from the Python API window.pywebview.api.getCourses().then((response) => { // try to update the state variable setCourses(response); // <------- throws the error }).catch((response) => {console.log(response); }); } return ( <Box> <MainAppBar /> <Grid container spacing={0}> <Grid item> <MenuList /> </Grid> <Grid item> <CourseList courses={courses} /> {/* passing the courses to the CourseList component */} </Grid> <FloatingSyncButton /> </Grid> </Box> ) } export function CourseList({ courses }) { // logic... return ( <List> {/* trying to list each course item */} {courses.map((courseName) => { return ( <ListItem key={courseName} disablePadding > <ListItemButton> <Checkbox/> <ListItemAvatar> <Avatar>{courseName}</Avatar> </ListItemAvatar> <ListItemText primary={courseName} /> </ListItemButton> </ListItem> ); })} </List> ); }

---

I would appreciate any help. Thank you!

Answer 1

Could you try this?

const getData = async () => {
  try {
      const api = await window.pywebview.api.foo()
      // do some stuff with api

      // fetch the courses from the Python API
      const courseList =  await window.pywebview.api.getCourses()
      setCourses(courseList);
      }
  catch (e) {
console.log(error)
}
    }