TypeError：通过axios发送post请求时将循环结构转换为JSON

Question

Im getting this error when I send a post request to the server when the role for the user is seller for which there are 2 extra properties for the JSON : resName and resAddress . I am also using placeautocomplete (from google) to get the address of the restaurant (the name of it can be anything for the time being). Register.js:

import logo from './logo.svg';
import './App.css';
import React, { Component, useEffect } from 'react';
import { useState } from 'react';
import axios from 'axios';
import LocationSearchInput from './placeComplete';



function Register() {

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState("seller");
  const [resName, setResName] = useState("");
  const [resAddress, setResAddress] = useState(React.createRef());


  async function registerUser(e){
    e.preventDefault();
    if (role === 'seller'){     
      const restaurantAddress = resAddress.current
      console.log(restaurantAddress.state.address, resName)
    }
      const response = await axios.post('/api/users/register', 
        {
          name,
          email,
          password,
          resName,
          resAddress,
          role
        }
      ).then(
        res => {
          console.log(res.data)
        }
      )
  }


  function registerRestaurant(){
    if (role === 'seller'){
      return(
        <div>
          <h4>Restaurant Name:</h4> <br />
          <input type='text' 
            placeholder='Restaurant Name'
            value={resName}
            onChange={(e) => setResName(e.target.value)}
          />
          <br />
          <LocationSearchInput ref={resAddress} />
        </div>
      );
    } 
  }

  return (
    <div>
      <form onSubmit={registerUser}>
        <input type="name" placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <br />

        <input type="email" placeholder="Email" 
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <br />


        <input type="password" placeholder="Password" 
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <br />


        <input type='radio' value='customer' 
          checked={role === 'customer'}
          onChange={(e) => {
            setRole(e.target.value)
          }}
        />
        customer
        <br />

        <input type='radio' value='seller' 
          checked={role === 'seller'}
          onChange={(e) => {
            setRole(e.target.value)
          }}
        />
        seller
        <br />

        {registerRestaurant()}

        <input type='submit' value='Register' />
      </form>
    </div>
  );
}

export default Register;

placeComplete.js:

import React from 'react';
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from 'react-places-autocomplete';
 
class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }
 
  handleChange = address => {
    this.setState({ address });
  };
 
  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => console.log('Success', latLng))
      .then(this.setState({address: address}))
      .catch(error => console.error('Error', error));
  };
 
  render() {
    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',
                className: 'location-search-input',
              })}
            />
            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {suggestions.map(suggestion => {
                const className = suggestion.active
                  ? 'suggestion-item--active'
                  : 'suggestion-item';
                // inline style for demonstration purpose
                const style = suggestion.active
                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                  : { backgroundColor: '#ffffff', cursor: 'pointer' };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion, {
                      className,
                      style,
                    })}
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    );
  }
}

export default LocationSearchInput;

I am also getting the following warning when I start typing in resAddress:

react_devtools_backend.js:4026 Warning: Each child in a list should have a unique "key" prop. Check the render method of `PlacesAutocomplete`. See https://reactjs.org/link/warning-keys for more information.

Mind you the server is accepting requests through postman.

Answer 1

This error usually gets thrown if you're not sending proper JSON. Your problem seems to happen here:

const response = await axios.post('/api/users/register', 
        {
          name,
          email,
          password,
          resName,
          resAddress,
          role
        }
      ).then(
        res => {
          console.log(res.data)
        }
      )

Since resAddress is a ref (not proper JSON):

const [resAddress, setResAddress] = useState(React.createRef());

Change to something like this and you should be fine:

{
  /* ... */
  resAddress: resAddress.current.state.address
  /* ... */
}