在onSubmit上反应JSON输入的意外结束

时间:2018-12-26 14:27:16

标签: reactjs

我向api发送请求,仅当我从api接收到数据时才使用该数据setState,否则将setState设置为undefined。 但是有时这些数据返回为空(这些数据是这样的),因此在这种情况下,我将setState设置为undefined。正常工作,除非当我没有输入并尝试发送请求时,然后我收到“未处理的拒绝(SyntaxError):JSON输入意外结束” 由于除了从api获取数据外,每次都将setState设置为undefined,为什么会发生这种情况?

试图用try / catch包装它以查看错误,但是它甚至没有启动。然后,我检查了拼写错误等。还尝试将整个if语句包装到另一个语句,该语句仅在从api接收到的数据为真时才运行,但是它什么也没做。

getPictureFunc = async event => {

   event.preventDefault();
   //here i grab values from user input in Form.js
   const year = event.target.elements.year.value;
   const month = event.target.elements.month.value;
   const day = event.target.elements.day.value;

   //here i make request call to NASA's API:
   const api_call = await fetch(
  `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos? 
earth_date=${year}-

${month}-${day}&api_key=${API_KEY}`
    );
    //here i save received data to JSON:
    const receivedDataFromApi = await api_call.json();

    if (year && month && day) {
      console.log(receivedDataFromApi);
      this.setState({
        sol: receivedDataFromApi.photos[0].sol,
        earth_date: receivedDataFromApi.photos[0].earth_date,
        img: receivedDataFromApi.photos[0].img_src,
        error: ""
      });
    } else {
      this.setState({
        sol: undefined,
        earth_date: undefined,
        img: undefined,
        error: "no pics for this day, try another one"
      });
    }
  };

2 个答案:

答案 0 :(得分:0)

提取调用返回承诺,因此您不必使用await,而是可以执行以下操作:

 string fetchXml = @" 
        <fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false' aggregate='true'> 
            <entity name='appointment'> 
            <all-attributes />
               <attribute name='shiftstart' alias='shiftstartyear' groupby='true'  dategrouping='year' /> 
               <attribute name='shiftstart' alias='shiftstartmonth' groupby='true'  dategrouping='month' /> 
               <attribute name='shiftstart' alias='shiftstartday' groupby='true'  dategrouping='day' /> 
               <attribute name='contId' alias='contId' groupby='true' /> 
                  <filter type='and'>
                    <condition attribute ='status' operator='not-in'><value>2</value><value>3</value>
                    </condition>
                        <condition attribute ='contact' operator='eq' value ='" + contactId + @"' />
                    </filter>


                </entity> 
        </fetch>";
        string xml = CreateXml(fetchXml, PageCookies, pagenumber, pageSize);

        // Excute the fetch query and get the xml result.
        RetrieveMultipleRequest fetchRequest1 = new RetrieveMultipleRequest
        {
            Query = new FetchExpression(xml)
        };

        var returnCollection = ((RetrieveMultipleResponse)GlobalCode.Service.Execute(fetchRequest1)).EntityCollection;

希望它会有所帮助。

答案 1 :(得分:0)

您的问题是,当您的参数为空时,该调用不会返回“空数据”,但实际上会失败。而且您期望它是JSON。

因此,您返回"Unhandled Rejection (SyntaxError): Unexpected end of JSON input"是因为它告诉您您认为这是JSON(并在其上调用api_call.json()),但是在这种情况下,来自NASA服务器的响应不是JSON。