javascript - 对于无法正常工作的复杂场景，用 useEffect Hook 替换 React Hook 中的 setState 回调

Question

嗨，我有一个场景，在特定场景中使用 React_hooks 在 React hooks 中设置新状态后，我需要替换 setState 回调。

当前代码是::

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>
  )
}

我希望在钩子(Hook)中更改 axios.put 请求的成功回调函数，如上面的代码中使用了 setState 和回调。

要重构的主要代码是::

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

我正在考虑做::

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

我希望 setState() 中的回调发生在 React hooks 中。考虑到上面的代码，请建议我一个理想的方法来做到这一点。

Answer 1

所以这是一个非常简单但又困难的难题，很多人都觉得很难解决。使用下面的代码，它肯定会完美地运行并执行其任务::在状态中添加一个附加标志“isError”:

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

并使用如下所示的 useEffect 。第一次 useeffect 将运行，但由于 useeffect 中的条件是特定类型的，因此它根本不会运行 IF block 。并且 IF block 将仅在下面提到的特定条件下运行。但请注意，每当任何依赖项数组元素发生更改时，useEffect 都会运行，但 IF block 根本不会执行。

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

  },[layout,saving,iserror]);

如果我们将状态的默认条件放在 IF block 中，那么只有 IF block 内部效果才会运行，但情况并非如上所述。因为我们希望 setState 回调仅在某些特定条件后运行，而不是始终运行。如果我们将上面的代码更改为如下所示::

//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)
      );
  }

希望有帮助。