Использование setState внутри useEffect при обновлении форм - PullRequest
Новая
       7

Использование setState внутри useEffect при обновлении форм

0 голосов
/ 31 января 2020

Итак, я прошел курс обучения по использованию форм в React.

Что я намерен сделать : текущий пользователь переходит к пути '/ update-profile' ==> частей Форма ввода, которую пользователь уже делал ранее, показывает.

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

. Я уже скопировал и вставил исходный файл, но проблема все еще возникает, пока в видео это работает просто отлично. Что-то не так с моим кодом? 

const EditProfile = ({
  profileState: { profile, loading },
  getCurrentProfile
}) => {
  const [formData, setFormData] = useState({
    company: "",
    website: "",
    location: "",
    status: "",
    skills: "",
    bio: ""
  });

  useEffect(() => {
    getCurrentProfile();

    setFormData({
      company: loading || !profile.company ? "" : profile.company,
      website: loading || !profile.website ? "" : profile.website,
      location: loading || !profile.location ? "" : profile.location,
      status: loading || !profile.status ? "" : profile.status,
      skills: loading || !profile.skills ? "" : profile.skills.join(","),
      bio: loading || !profile.bio ? "" : profile.bio
    });
  }, [loading, getCurrentProfile]);

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Вы хотите разделить это на 2 эффекта: 

useEffect(() => {
  getCurrentProfile();
}, [getCurrentProfile]);

useEffect(() => {
  setFormData({
    company: loading || !profile.company ? "" : profile.company,
    website: loading || !profile.website ? "" : profile.website,
    location: loading || !profile.location ? "" : profile.location,
    status: loading || !profile.status ? "" : profile.status,
    skills: loading || !profile.skills ? "" : profile.skills.join(","),
    bio: loading || !profile.bio ? "" : profile.bio
  });
}, [loading, profile]);
0 голосов
/ 31 января 2020

Вам следует подождать ваших внутренних данных, а затем обновить локальное состояние. Для этого вы можете использовать синтаксис async / await или Promise. Использование асинхронного / ожидающего синтаксиса: 


useEffect(() => {

        async function getAPI() {
            await getCurrentProfile();
            setFormData({
               company: loading || !profile.company ? "" : profile.company,
               website: loading || !profile.website ? "" : profile.website,
               location: loading || !profile.location ? "" : profile.location,
               status: loading || !profile.status ? "" : profile.status,
               skills: loading || !profile.skills ? "" : profile.skills.join(","),
               bio: loading || !profile.bio ? "" : profile.bio
            });
        }
        getAPI();

    }, []);
...