Замена обратного вызова setState в реагирующем хуке хуками useEffect для сложного сценария не работает

Question

Привет У меня есть сценарий, в котором мне нужно заменить функцию обратного вызова setState после установки нового состояния в ответных хуках с React_hooks в конкретном сценарии.

Текущий код:

const ThemeOptions = () => {
  const [previewType, setPreviewType] = useState("Desktop");
  const [previewUrl, setPreviewUrl] = useState("");
  const [layout, setLayout] = useState(null);
  const [saving, setSaving] = useState(false);

  const handleSave = (newdata) => {
    setLayout(newdata);
    setSaving(true);

    axios
      .put(window.urls.save, this.state.layout)
      .then(
        function(response) { // i want this to change in hooks
           this.setState(
             {
               layout: response.data,
               saving: false,
             },
             function() {
               this.refs["preview"].refresh();
             }
           );
        }.bind(this)
      )
      .catch(
        function(error) {
          console.log(error);
          setSaving(false);
        }.bind(this)
      );
  }

  return (
    <div>
      <Router>
        <div className="theme_options">
          <div className="row" style={{ height: 100 + "vh" }}>
            <Sidebar
              layout={layout}
              onSave={handleSave}
              onReset={this.handleReset}
              previewType={previewType}
              onChangeScreen={handlePreviewScreenChange}
              saving={saving}
            />
            <div className="col main">
              <span className="d-none d-md-block">
                <Preview
                  ref="preview"
                  type={this.state.previewType}
                  url={this.state.previewUrl}
                />
              </span>
            </div>
          </div>
        </div>
      </Router>
    </div>
  )
}

Я хочу, чтобы функция обратного вызова успешных запросов ax ios .put изменялась в хуках, поскольку в приведенном выше коде используется setState вместе с обратным вызовом.

Основной код для рефакторинга: ::

this.setState(
             {
               layout: response.data,
               saving: false,
             },
             function() {
               this.refs["preview"].refresh();
             }
           );

Я думал о выполнении: *

useEffect(()=> {
 // i dont know what to put there...
),[]);

Я хочу, чтобы обратный вызов в setState () происходил в ответных хуках. Пожалуйста, предложите мне идеальный способ сделать это, учитывая приведенный выше код.

Answer 1

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

  const [layout, setLayout] = useState(null);
  const [saving, setSaving] = useState(false);
  const [iserror, setIserror] = useState(true);

и используйте useEffect, как показано ниже. Первый запуск useeffect будет выполняться, но, поскольку условия в useeffect имеют указанный тип c, он вообще не будет запускать блок IF. И блок IF будет выполняться только при указанных c условиях, указанных ниже. Но учтите, что useEffect будет запускаться каждый раз, когда изменяется любой из элементов массива зависимостей, но блок IF не будет выполняться вообще.

  useEffect(()=>{
      if(layout && !saving && !iserror){
          console.log('specific case render ');
          this.refs["preview"].refresh();
      }

  },[layout,saving,iserror]);

если бы мы поместили условия состояний по умолчанию в блок IF, тогда только внутри блока IF эффект будет работать, что не так, как указано выше. Поскольку мы хотим, чтобы обратный вызов setState выполнялся только после определенного условия c и не всегда. Если мы изменим приведенный выше код на что-то вроде этого, то ::

//for understanding purpose only default states
layout==null,
saving == false
isError== true
//

  useEffect(()=>{
      if(layout == null && !saving && iserror){ //observe this default case
          console.log('default case render ');

      }

  },[layout,saving,iserror]);

Функция handleSave выполнит свою задачу с небольшими изменениями: *

  const handleSave = (newdata) => {
    setLayout(newdata); // useEffect run as layout changed but conditions 
                      // not satisfied
    setSaving(true);  // useEffect will run since saving changed
                      // not satisfied

    axios
      .put(window.urls.save, layout)
      .then(
        function(response) { // only this case forces the code in 
                             // useEffect to run as 3 below cases are 
                             // satisfied
          setLayout(response.data);
          setSaving(false);
          setIserror(false);

        }.bind(this)
      )
      .catch(
        function(error) {
          console.log(error);
          setSaving(false);// only 2 case satisfied i.e layout before 
                            // axios line and saving but not iserror.
          setIserror(true);
        }.bind(this)
      );
  }

Надеюсь, это поможет.

Answer 2

setState является асинхронным. В вашем случае ax ios, выполненный до того, как setLayout будет обновлен

const handleSave = (newdata) => {

    axios
      .put(window.urls.save, this.state.layout)
      .then(
        function(response) { // i want this to change in hooks
             setLayout(response.data);               
             setSaving(false);
             this.refs["preview"].refresh();
        }.bind(this)
      )
      .catch(
        function(error) {
          console.log(error);
          setSaving(false);
        }.bind(this)
      );
  }


useEffect(()=>{
setLayout(newdata);
setSaving(true);
if(newData) handleSave(newData)
},[newData,saving])

, а также будет использовать setchange при работе onSave.

 <Sidebar
      layout={layout}
      onSave={(data)=>setLayout(data)}
      onReset={this.handleReset}
      previewType={previewType}
      onChangeScreen={handlePreviewScreenChange}
      saving={saving}
    />