Get the error of a JSON Validation List in ReactJS

Question

On my api test, it was able to run as the image below. but, when I try to code in React.JS, the user Id cannot be pass in. What is the problem of this?

But when I try to code in front end, the user Id cannot be pass in to api. Consider the code below:

  constructor (props){
    super(props);
    const Users_id = localStorage.getItem('id');
    this.state ={
      users_id: Users_id,
      event_name: '',
      event_email: '',
      event_description: '',
      event_type: '',
      event_location: '',
      start_date: '',
      end_date: '',
      history: PropTypes.object.isRequired
    }
    this.create = this.create.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  create(){
    // const loginEmail = localStorage.getItem('loginEmail');
    const Users_id = localStorage.getItem('id');
    this.setState({Users_id})
    // console.log(loginEmail)
    PostData('api/event/submit', this.state).then ((result) => {
        let responseJSON = result;
        console.log(responseJSON);
        console.log(this.state)

      });
   }

The error show in console.log(responseJSON):

//Updated PostData

    return new Promise((resolve, reject) => {
        fetch( BaseUrl+type, {
            method: "POST",
            body: JSON.stringify(userData),
            Accept: 'application/json',
            // mode: 'no-cors',
            headers: 
                { 
                    'Content-Type': 'application/json' 
                },
          })
        .then((response) => response.json())
        .then((responseJson) => {
            resolve(responseJson);
        })
        .catch((error)=>{
            console.error('Error:', error);
        })

    });

is your API expecting users_id to be a number? or stringified number? — Jacob
– Jacob, Commented Feb 16, 2020 at 15:35
I belive getItem returns a string. Try putting console.log(typeof Users_id) just before updating state. — Jacob
– Jacob, Commented Feb 16, 2020 at 15:41
@Jacob You're right, the response from console log is string. So is it any way to convert string to number? — koko ka
– koko ka, Commented Feb 16, 2020 at 15:45

Jacob · Accepted Answer · 2020-02-16 15:49:27Z

1

Storage.getItem returns a string. The id should be casted to a number

const Users_id = parseInt(localStorage.getItem('id'));

You may want to check isNaN(Users_id) before sending it. Or just let it fail, and handle the error.

answered Feb 16, 2020 at 15:49

Jacob

9262 gold badges8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fadi omar · Accepted Answer · 2020-02-16 16:01:54Z

1

you need to check if the user id exists in local storage before inserting it into props

    super(props);
    const Users_id = localStorage.getItem('id') || '';
    this.state ={
      users_id: Users_id,
      event_name: '',
      event_email: '',
      event_description: '',
      event_type: '',
      event_location: '',
      start_date: '',
      end_date: '',
      history: PropTypes.object.isRequired
    }

and when you want to setState you need to pass the same name you used in the state

const Users_id = localStorage.getItem('id');
if(Users_id){
this.setState({users_id: Users_id})
}

answered Feb 16, 2020 at 16:01

fadi omar

7687 silver badges15 bronze badges

Collectives™ on Stack Overflow

Get the error of a JSON Validation List in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related