How to map over an array that is yet to exist?-CodePudding

I am currently triggering an API call that returns an array of two objects. The trigger is instigated by user input and will yield an output after pressing a button

Here is the code:

  const [curQuery, setCurQuery] = useState("");

  const [curOutput, setCurOutput] = useState("Empty");
  

  const handleClick = (query) => {
        
   setCurOutput(myApiCall.queryItems(curQuery));
      
  };

 console.log(curOutput);

The current output log looks like this:

  > (2) [myResults, myResults]
               0: myResult
               id: 00
               description: "Here is the main description of Type 1"
    
               1: myResult
               id: 01
               description: "Here is the main description of Type 2"

I am only interested in the description, I can currently access it like myOutput[0].description and myOutput[1].description to access the respective values, but would like to skim across all entries and collect the descriptions only.

One suggestion is to map over the array and collect the values as follows:

  const descriptions = curOutput.map((v) => v.descriptions);

The issue is that this unfourtunetly crashes my program as my query is yet to be defined

return (
    <div>
      <input
        className="myInput"
        placeholder="typeQuery"
        value={curQuery}
        onChange={(e) => setCurQuery(e.target.value)}
      />

      <button
        onClick={() => {
          handleClick(curQuery);
        }}
      >
        Request Items based on query
      </button>
   </div>
  );

As you can see above, I am setting the current query based on user input and then submitting that input once the user has finished typing.

How do I juggle these in order for my program to work and return the relevant descriptions based on the request?

CodePudding user response：

you have an array of two objects. that's look something like this :

const myOutput = [ {
    id: 00 ,
    description: "Here is the main description of Type 1"
} ,
{
    id: 01, 
    description: "Here is the main description of Type 2"
}
]

you can use for...in statement to iterates over it like this :

for(key in myOutput ){
    console.log(myOutput[key].description) // just a demo you can make use of it as you like 
}

and the output is all descriptions you want :

Here is the main description of Type 1
Here is the main description of Type 2

CodePudding user response：

You can add a fallback array in case the variable is not yet defined like this:

const descriptions = (curOutput || []).map((v) => v.descriptions);

Or just pass an empty array to useState's initial value

const [curOutput, setCurOutput] = useState([]);

Also keep in mind that your myApiCall.queryItems(curQuery) might be async and for example returns a Promise instead of returning the result directly. You could then do something like this:

myApiCall.queryItems(curQuery).then(result => setCurOutput(result));