Не происходит своевременный ререндеринг компонента в реакте

Question

https://github.com/patr4519/githubUserInfo.git

function App() {
  return (
    <div className='wrapper'>
      <Nav />
      <Header />
      <Main />
    </div>
  );
}

function Main() {
  const [users, setUsers] = React.useState([]);
  const [searchValue, setSearchValue] = React.useState('');

  const onChangeSearchValue = (event) => {
    setSearchValue(event.target.value);
  }

  const addUsers = () => {
    let arrOfJson = []
    for (let user of searchValue.split(', ')) {
      fetch(`https://api.github.com/users/${user}`)
        .then(us => us.json())
        .then((json) => arrOfJson.push(json))
        .catch((err) => {
          console.log(err);
        })
    }
    setUsers(arrOfJson);
  }

  const clearInput = () => {
    setSearchValue('')
  }

  return (
    <div className='main'>
      <InputForm addUsers={addUsers} onChangeSearchValue={onChangeSearchValue} clearInput={clearInput} />
      <Users users={users} />
    </div>
  );
}

export default App;

Суть приложения: в инпут вводятся логины пользователей гитхаба через запятую (если их несколько), и приложение показывает результат в виде карточек, состоящих из фото, имени пользователя и даты регистрации. После ввода пользователя(пользователей) в инпут и нажатия кнопки Enter, в состояние users попадает массив с пользователями в виде объектов, которые потом используются для отображения карточек.

Проблема в том, что компонент Main перерисовывается, только после того как нажимается кнопка Enter и совершается ещё какое-либо действие, например нажатие кнопки Clear или дополнительный ввод в поле инпута, не смотря на, что стейт users обновляется после нажатия на кнопку Enter. И по идее должна происходить перерисовка, которая не происходит тогда когда надо.

В чем может быть проблема? Прикрепляю ссылку на репозиторий.

Answer 1

Может сработать так

const addUsers = async () => {
  let arrOfJson = []
  for (let user of searchValue.split(', ')) {
    try {
      const us = await fetch(`https://api.github.com/users/${user}`)
      const json = await us.json()
      arrOfJson.push(json)
    } catch(err) {
        console.log(err);
    }
  }
  setUsers(arrOfJson);
}

Или так...

const addUsers = () => {
  for (let user of searchValue.split(', ')) {
    fetch(`https://api.github.com/users/${user}`)
      .then(us => us.json())
      .then((json) => setUsers(old => [...old, json]))
      .catch((err) => {
        console.log(err);
      })
  }
}

БЛОГ НА HUSL

Не происходит своевременный ререндеринг компонента в реакте

Ответы (1 шт):