React js 的 Axios 问题（每次运行 get/put 请求时都会出错）

Question

I am writing in my VSC editor and using React js library and using Axios for my API. For this mission, I used a functional component and also a function component.

Home.js

import React from 'react'
import { Link } from "react-router-dom";
import './Home.css'
import Courses from './Courses';
import SearchBar from '../components/SearchBar';
import Title from '../components/Title';
import axios from 'axios';
export default function Home() {
const reqBody = {
name:"Roee",
idNumber:"132456789",
idNumberConf:"132456789",
personalNumber:"1234567",
personalNumberConf:"1234567",
hogerNumber:"12345678",
hogerNumberConf:"12345678",
phoneNumber:"054838350",
birthDate:"06/12/1990",
password:"1132456",
passwordConf:"1132456"};

const config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
    }
};

const reqFunc = async () => {
    console.log("ddd");
    axios.get('localhost:3010/accounts/mine', reqBody, config).then((res) => {
    console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
    console.log("AXIOS ERROR: ", err);
    })


}

      return (
    <>
        <div className="bg"></div>
        <Title title={"Search for Course"}/>
        <SearchBar/>
        {reqFunc()} 
        <Courses/>
        </>
);
}

App.js

import React from 'react';
import { BrowserRouter as Router, Route,Switch} from "react-router-dom";
import { Link } from "react-router-dom";
import Home from './pages/Home';
import Courses from './pages/Courses'
import Navbar from './components/Navbar'
import Signin from './pages/Sign-in'
import Register from './pages/Register'
import ErrorPage from './components/ErrorPage'
import SingleCourse from './pages/SingleCourse'
import './App.css'
import {
  MDBContainer,
} from 'mdbreact';
import Footer from './components/Footer'
function App() {
  return (
      <>

  <Navbar/>
  <MDBContainer fluid>      
  <Switch>

    <Route exact path="/" component={Home}/>
    <Route exact path="/courses" component={Courses}/>
    <Route exact path="/courses/:id" component={SingleCourse}/>
    <Route path="/log-in" component={Signin}/>
    <Route path="/register" component={Register}/>
    <Route component={ErrorPage}/>
  </Switch>

  </MDBContainer>
  <Footer/>
  </>


);
}

export default App;

I got an Error:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

in Home (created by Context.Consumer)
in Route (at App.js:24)
in Switch (at App.js:22)
in div (created by Container)
in Container (at App.js:21)
in App (at src/index.js:12)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:11)

Also the err log to the console

Home.js:36 AXIOS ERROR:  Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:80)
at dispatchXhrRequest (xhr.js:166)
at new Promise (<anonymous>)
at xhrAdapter (xhr.js:16)
at dispatchRequest (dispatchRequest.js:49)

What I am doing wrong?! Another easy question -> Why this err log print to the console twice? How and Why React doing it?

Answer 1

Try:

const reqFunc = async () => {
  try {
    const response = await axios.get(
      "localhost:3010/accounts/mine",
      reqBody,
      config
    );
    console.log(response);
  } catch (err) {
    console.log(err);
  }
};

You're not 'await'ing anything in your async function, so the async part is redundant in your example.

The first error is because your promise hasn't fully resolved.

Answer 2

I'm not sure I can answer your questions but I have a few comments. I'm working more with fetch API and my comments work with fetch API so here also can be useful regarding that axios and fetch are similar. This is not in a valid JSON format: const reqBody I would write like this:

const reqBody = {
"name":"Roee",
"idNumber":"132456789",
"idNumberConf":"132456789",
"personalNumber":"1234567",
"personalNumberConf":"1234567",
"hogerNumber":"12345678",
"hogerNumberConf":"12345678",
"phoneNumber":"0548336350",
"birthDate":"06/12/1990",
"password":"1132456",
"passwordConf":"1132456"}

HTTP Get request should not take a request body or it is a typo and you meant POST request :

axios.post('localhost:3010/accounts/mine', reqBody, config)

and I would say for the content type can be application/json :

const config = {
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    }
};

Answer 3

Wrap your call in a useEffect hook and try this:

  const [data, updateData] = useState(undefined);

  useEffect(() => {
    async function fetchData() {
      const response = await axios.get('localhost:3010/accounts/mine', reqBody, config);
      const json = await response.json();
      updateData(json);
    }
    fetchData();
  }, []);

Answer 4

The problem in your case is that you are calling your fetch code inside the render return statment. Try to call the function before you return.