Блог

Когда я перевожу данные из одного состояния в другое состояние. Он говорит undefined. В настоящее время я работаю над функцией tinder, подобной функции прокрутки карты, щелчком правой и левой кнопки мыши.

Я передаю идентификатор пользователя с карты на кнопку to. Например, проведите пальцем вправо или влево.

// Сценарий сначала, если вы объявили массив объекта статическим, он работает как шарм, тогда он не выдает никаких ошибок.

//// Сценарий второй, если я динамически устанавливаю данные с помощью API в setState и присваиваю массив данных переменной состояния другой переменной состояния, он говорит undefined.

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

Вот мой код

 
const AllData= [
    {
      id: 1,
      name: 'XYZ'
    },
    {
      id: 2,
      name: 'ABC'
    },
    {
      id: 3,
      name: 'ABC 2'
    },
     {
      id: 4,
      name: 'ABC 3'
    },
     {
      id: 5,
      name: 'ABC 4'
    }
  ]  //It works if set static array

const [AllData, setAllData] = useState([]); //it does not works

const GetAllUserData = async () =>{
     const bodyParameters ={
   session_id : SessionId
   };

   const {data : {data}} = await axios.post(GETALLUSER_API , bodyParameters);
   setAllData(data); 
}

// Setting current user from all data 
 const [currentUser, setCurrentUser] = useState(AllData[0])

console.log(currentUser); // undefined says 

 

Здесь AllData они будут добавлены в состояние после завершения GetAllUserData выполнения, это асинхронная функция, поэтому AllData она будет доступна через некоторое время, вам нужно обновить CurrentUser, который вы должны сделать следующим образом.

 useEffect(() => {
  if (AllData.length) {
    setCurrentUser(AllData[0]);
  }
}, [AllData]);
 

Это не сработало, потому что вы, возможно, вернулись до того, как setAllData мог быть вызван initialize AllData .

Будучи вызовом api, возврат данных занимает некоторое время.

Хороший способ обойти эту ситуацию — поместить загрузчик до тех пор, пока он не получит данные, и когда вы в конечном итоге получите данные, тогда только отобразите содержимое на экране.