Home>

I just started REACT and I am sorry if the question is difficult

I am studying only to list the results acquired by AXIOS on the screen
The following code is

Import React, {usestate} from 'React'
IMPORT AXIOS from 'Axios';
const searchGooglebooks= async (searchString: String)= >
 {
  const URL= 'https://www.googleapis.com/books/v1/volumes';
  const params= {q: searchString};
  TRY {
    const Response= AWAIT AXIOS.GET (URL, {PARAMS});
    RETURN {ISSUCCESS: TRUE, DATA: RESPONSE.DATA, ERROR: NULL};
  } catch (Error) {
    RETURN {ISSUCCESS: FALSE, Data: NULL, ERROR};
  }
}
Const Signin: React.fc= ()= >
 {
  CONST [searchResult, ChangesearchResult]= usestate <
Any >
(NULL);
  const clicksignin= async ()= >
 {
    const result= await searchGooglebooks ('API');
    IF (Result.issuccess) {
      ChangeSearchResult (Result.Data);
    } else {
      window.Alert (String (Result.Error));
    }
  }
  RETURN (
    ≪
DIV >
      ≪
Form >
        ≪
INPUT TYPE= "Button" VALUE= "SIGN IN" OnClick= {ClickSignin} />
      ≪
/Form >
      ≪
UL >
        {
          SearchResult!== NULL &
&
 ({
            searchresult.map ((item: any)= >
 {
              RETURN (<
Li >
{Item.volumeinfo.Title} <
/Li >
;
            })
          })
        }
      ≪
/UL >
    ≪
/DIV >
  ;
}
export Default Signin;

The second halfsearchresult.map ((item: any)= > { .mapof.The following error came out and I was able to answer a question

',' is required. TS (1005)

Output

{
          SearchResult!== NULL &
&
 ({
            searchresult.map ((item: any)= >
 {
              RETURN (<
Li >
{Item.volumeinfo.Title} <
/Li >
;
            })
          })
        }

If you comment out 

, you have confirmed the results of the API.

MAP may be wrong, but it is not possible to respond. Could you teach me how to respond

What is doing and the name of the componentSigninThere is no reason to be consistent with

  • Answer # 1

    SEARCHRESULT.MAPWrap({})There is no need.

    < UL > ≪ /UL >It is good to replace the contents of as follows.

    {searchResult!== NULL &
    &
     searchresult.map ((item: any)= >
     {
      RETURN <
    Li >
    {Item.volumeinfo.Title} <
    /Li >
    ;
    }))
    
    

    Thank you. It went well. There were other bad things, so the final code will be described separately. MAP was diverged with the net code, but I did not understand.

    nirgnehol2021-04-07 01:21:34
  • Answer # 2

    Finally,

    {searchResult!== NULL &
    &
     searchresult.items.map ((item: any)= >
     {
      RETURN (<
    li key= {item.id} >
    {Item.volumeinfo.Title} <
    /Li >
    ;
    }))
    
    It was fixed with 

    .