Как извлечь данные из объекта в массиве, когда состояние обновляется в React с помощью хуков?

Question

Это часть предыдущего поста: Каковы рекомендации React для получения данных, которые будут использоваться для рендеринга страницы?

Я добавляю объекты в массив с помощью useState ( []). Каждый объект имеет значение firstName и lastName. Я хочу сложить всю длину всех имен и фамилий, чтобы получить общее количество символов, чтобы затем я мог получить среднюю длину имени для каждого.

То, что у меня есть в настоящее время, дает мне неправильную информацию значения: firstName (100) lastName (106)

Значения должны быть 6 & 7

  const [players, setPlayers] = useState([]);
  const [firstNameCount, setFirstNameCount] = useState(0);
  const [lastNameCount, setLastNameCount] = useState(0);

  useEffect(() => {
    setPlayers([]);

    teams.forEach(teamId => {
      axios.defaults.headers.common['Authorization'] = authKey;

      axios.get(endPoints.roster + teamId)
        .then((response) => {
          let teamPlayers = response.data.teamPlayers;
          console.log(response.data.teamPlayers)
          setPlayers(prevPlayers => [...prevPlayers, ...teamPlayers]);
        })
        .catch((error) => {
          console.log(error);
        })
    });
  }, [teams]);

  useEffect(() => {
     players.forEach(player => {
            setFirstNameCount(prevCount => prevCount + player.firstName.length);
            setLastNameCount(prevCount => prevCount + player.lastName.length);
          })
  }, [players]);

Если я изменю код на этот

useEffect(() => {
    setPlayers([]);

    teams.forEach(teamId => {
      axios.defaults.headers.common['Authorization'] = authKey;

      axios.get(endPoints.roster + teamId)
        .then((response) => {
          let teamPlayers = response.data.teamPlayers;
          console.log(response.data.teamPlayers)
          setPlayers(prevPlayers => [...prevPlayers, ...teamPlayers]);

          teamPlayers.forEach(player => {
            setFirstNameCount(prevCount => prevCount + player.firstName.length);
            setLastNameCount(prevCount => prevCount + player.lastName.length);
          })
        })
        .catch((error) => {
          console.log(error);
        })
    });
  }, [teams]);

Это замедляется значительно снизил рендер, и я получил: firstName (7), lastName (7), что все еще не так.

Answer 1

Я бы порекомендовал вам перенести загрузку вашей команды / игрока из вашего компонента в магазин отдельно от компонента, но в любом случае, зачем ставить длины в состояние? Почему бы просто не вычислить его из состояния игрока, когда вам это нужно?

const sum = values => values.reduce((r, v) => r + v, 0);
const avg = values => sum(values) / values.length;

const avgFirst = avg(players.map(p => p.firstName.length));
const avgLast = avg(players.map(p => p.lastName.length));

Я понимаю, что это приведет к его пересчету при каждом рендере, но если ваш список игроков не будет огромным, я ожидаю, что это быть разумным исполнителем.

Answer 2

Что ж, вместо того, чтобы устанавливать состояние для каждого приращения, вы можете сложить все длины имен и фамилий, а затем установить состояние следующим образом:

useEffect(() => {
    setPlayers([]);

    teams.forEach(teamId => {
      axios.defaults.headers.common['Authorization'] = authKey;

      axios.get(endPoints.roster + teamId)
        .then((response) => {
          let teamPlayers = response.data.teamPlayers;
          console.log(response.data.teamPlayers)
          setPlayers(prevPlayers => [...prevPlayers, ...teamPlayers]);

          let firstNameCount = 0;
          let lastNameCount = 0;

          teamPlayers.forEach(player => {
            firstNameCount += player.firstName.length;
            lastNameCount += player.lastName.length;
          })
          setFirstNameCount(prevCount => prevCount + firstNameCount);
          setLastNameCount(prevCount => prevCount + lastNameCount);
        })
        .catch((error) => {
          console.log(error);
        })
    });
  }, [teams]);

Дайте мне знать, если это поможет :)