React:无效的JSON

Question

当我从以下URL获取并试图显示它们时(通过react json-view)，我遇到了property must be a valid JSON object.的错误。

Promise.all([
  fetch("http://127.0.0.1:8000/accounts/initstate"),
  fetch("http://127.0.0.1:8000/data/racedata_json/"),
  fetch("http://127.0.0.1:8000/data/racerlog_json/"),
  fetch("http://127.0.0.1:8000/data/racerdata_json/"),
  fetch("http://127.0.0.1:8000/data/teamdata_json/"),
  ])
  .then(([usr, rcdata, rclog, rcrdata, tdata]) => {
    const initialState = {
      user: usr,
      raceapi: {
        racedata: rcdata, racerlog: rclog, racerdata: rcrdata, teamdata: tdata,
      }
    };
    const App = () => {
      return (
        <NTTrackerContextProvider initState={initialState}>
          <NTTracker/>
        </NTTrackerContextProvider>
      )
    };
    ReactDOM.render(<App />, document.getElementById('root'));
  })

上面的每个URL都是一个有效的JSON对象。例如，第一个看起来像(在正文内容中)：

{"user": {"id": 1, "authenticated": true}, "csrftoken": "DSY"}

这里是我的上下文提供者：

const initialState = {
  user: {username: "", authenticated: false, email: "",},
  raceapi: {
    racedata: {'data': null}, racerlog: {}, racerdata: {}, teamdata: {},
  }
};

const nttrackerReducer = (state, action) => {
  switch (action.type) {
    case 'LOGGED_IN': {
      let {user, raceapi, ...etc} = state;
      let {userdata} = action;
      return {
        ...etc, user: {...user, ...userdata,}, raceapi: {...raceapi},
      }
    }
    // more cases below
    default: return state;
  }
};

const NTTrackerContextProvider = props => {
  const initState = props.initState || initialState;
  const [state, dispatch] = useReducer(nttrackerReducer, initState);

  return (
    <NTTrackerContext.Provider value={[state, dispatch]}>
      {props.children}
    </NTTrackerContext.Provider>
  );
};

export default NTTrackerContextProvider;

但是，state.raceapi的输出(使用const [state, dispatch] = useContext(NTTrackerContext))看起来如下

​

​

有人能帮忙吗？我希望URL中的JSON数据进入状态，但我无法让数据进入状态。

我试着打印{state.raceapi.racedata}，但是它变成了一个Response对象；看起来我将捕获对象中的数据，但我不知道如何实现。

在调用API的函数中是否需要包含另一个fetch，还是有更简单的方法？

提前谢谢。

Answer 1

@Evolutionxbox将我设置为正确的方向，首先将每个响应对象转换为JSON格式：

Promise.all([
  fetch(("http://127.0.0.1:8000/accounts/" + url)),
  fetch("http://127.0.0.1:8000/data/racedata_json/"),
  fetch("http://127.0.0.1:8000/data/racerlog_json/"),
  fetch("http://127.0.0.1:8000/data/racerdata_json/"),
  fetch("http://127.0.0.1:8000/data/teamdata_json/"),
  ])
  .then((([usr, rcdata, rclog, rcrdata, tdata]) => Promise.all(
    [usr.json(), rcdata.json(), rclog.json(), rcrdata.json(), tdata.json()]
  )))
  .then(([usr, rcdata, rclog, rcrdata, tdata]) => {
    const initialState = {
      user: usr,
      site: {locale: enUS,},
      raceapi: {
        // ...

谢谢任何想帮忙的人。