Array map is giving me an error when trying to call the data in a dynamic render operation-CodePudding

function UserTransactionsComponent1() {
  const [accounts, setAccounts] = useState();

  useEffect(() => {
    async function fetchData() {
      const res = await fetch(
        'https://proton.api.atomicassets.io/atomicassets/v1/accounts'
      );
      const { data } = await res.json();
      setAccounts(data);
    }
    fetchData();
  }, []);

  accounts.map((result) => {
    const { account } = result;
  });

  return <PageLayout>Hi! {account}</PageLayout>;
}

export default UserTransactionsComponent1;

I console.log(accounts) right before I map it and all the properties are there. The issue is that the account in the acounts.map is showing greyed out on VSCode. It's not being picked up on the return. This is causing me to receive the following error: TypeError: Cannot read properties of undefined (reading 'map'). What's the reason for this?

CodePudding user response：

The return statement is outside the variable (account) scope.

function UserTransactionsComponent1() {
  const [accounts, setAccounts] = useState();

  useEffect(() => {
    async function fetchData() {
      const res = await fetch(
        "https://proton.api.atomicassets.io/atomicassets/v1/accounts"
      );
      const { data } = await res.json();
      setAccounts(data);
    }
    fetchData();
  }, []);

  return (
    <PageLayout>
      Hi!{" "}
      {accounts &&
        accounts?.map((result) => {
          const { account } = result;
          return account;
        })}
    </PageLayout>
  );
}

export default UserTransactionsComponent1;

CodePudding user response：

The problem is that your map function is running before your fetch has completed, so accounts is still undefined when you try mapping.

There's a few ways to solve this. One options is just to use .then(). So put your map function inside of .then, inside your useEffect.

.then(() => accounts.map( // insert rest of function here ))

This tells the code to run the map function only after the fetch completes

CodePudding user response：

accounts is not defined until the fetch is complete, so you need to map it in an effect, which waits for the state of accounts to be set:

useEffect(() => {
  accounts.map(...);
}, [accounts]);

On top of that, when you return, account will be undefined. You can create a loading screen or something while the data is fetching, then re-render with the data:

return (
  <PageLayout>{accounts ? accounts : "Loading..."}</PageLayout>
);

I'm not sure what you're trying to do in your map function; you're not specifying specifically which account in the array you want; you'll need another state.