Question

The bounty expires in 2 days. Answers to this question are eligible for a +250 reputation bounty. Adam Zerner is looking for a canonical answer.

MYMEMORY WARNING: YOU USED ALL AVAILABLE FREE TRANSLATIONS FOR TODAY. NEXT AVAILABLE IN 23 HOURS 57 MINUTES 44 SECONDS VISIT HTTPS://MYMEMORY.TRANSLATED.NET/DOC/USAGELIMITS.PHP TO TRANSLATE MORE

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS MYMEMORY WARNING: YOU USED ALL AVAILABLE FREE TRANSLATIONS FOR TODAY. NEXT AVAILABLE IN 23 HOURS 57 MINUTES 39 SECONDS VISIT HTTPS://MYMEMORY.TRANSLATED.NET/DOC/USAGELIMITS.PHP TO TRANSLATE MORE

import { useState, useEffect } from "react";

export default () => {
  const userIds = [1, 2, 3];
  const users = [];

  for (let userId of userIds) {
    const user = useFetchUser(userId);

    users.push(user);
  }

  return (
    <div>
      <h1>Users</h1>
      {users.map((user) => (
        <div>
          {user.id} - {user.name}
        </div>
      ))}
    </div>
  );
};

const useFetchUser = (id) => {
  const nameMap = {
    1: "Alice",
    2: "Bob",
    3: "Carol",
  };
  const [user, setUser] = useState({});

  useEffect(() => {
    setTimeout(() => {
      const name = nameMap[id];

      setUser({
        id,
        name,
      });
    }, 1000);
  }, [id]);

  return user;
};

MYMEMORY WARNING: YOU USED ALL AVAILABLE FREE TRANSLATIONS FOR TODAY. NEXT AVAILABLE IN 23 HOURS 57 MINUTES 37 SECONDS VISIT HTTPS://MYMEMORY.TRANSLATED.NET/DOC/USAGELIMITS.PHP TO TRANSLATE MORE

MYMEMORY WARNING: YOU USED ALL AVAILABLE FREE TRANSLATIONS FOR TODAY. NEXT AVAILABLE IN 23 HOURS 57 MINUTES 36 SECONDS VISIT HTTPS://MYMEMORY.TRANSLATED.NET/DOC/USAGELIMITS.PHP TO TRANSLATE MORE

const useFetchUsers = (ids) => {
  const users = [];

  for (let id of ids) {
    const user = useFetchUser(id);

    users.push(user);
  }

  return users;
};

MYMEMORY WARNING: YOU USED ALL AVAILABLE FREE TRANSLATIONS FOR TODAY. NEXT AVAILABLE IN 23 HOURS 57 MINUTES 34 SECONDS VISIT HTTPS://MYMEMORY.TRANSLATED.NET/DOC/USAGELIMITS.PHP TO TRANSLATE MORE

React Hook "useFetchUser" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render. (react-hooks/rules-of-hooks)eslint

MYMEMORY WARNING: YOU USED ALL AVAILABLE FREE TRANSLATIONS FOR TODAY. NEXT AVAILABLE IN 23 HOURS 57 MINUTES 33 SECONDS VISIT HTTPS://MYMEMORY.TRANSLATED.NET/DOC/USAGELIMITS.PHP TO TRANSLATE MORE

Answer 1

MYMEMORY WARNING: YOU USED ALL AVAILABLE FREE TRANSLATIONS FOR TODAY. NEXT AVAILABLE IN 23 HOURS 57 MINUTES 31 SECONDS VISIT HTTPS://MYMEMORY.TRANSLATED.NET/DOC/USAGELIMITS.PHP TO TRANSLATE MORE

const App = () => {
  const userIds = [1, 2, 3];

  return (
    <div>
      <h1>Users</h1>
      {userIds.map((userId) => <User userId={userId} key={userId} />)}
    </div>
  );
}

const User = (props) => {
  const userId = props.userId;
  // Returns `undefined` until the user is loaded
  const user = useFetchUser(userId);

  if (!user) {
    return null;
  }

  return (
    <div>{user.name}</div>
  )
}

友情链接