将 React 钩子中的 setState 回调替换为 useEffect 钩子，用于复杂场景不起作用

Question

你好我有一个场景，我需要在特定场景中使用 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>
  )
}

我想在钩子中更改 axios.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

setState 是异步的。在您的情况下，在 setLayout 之前执行的 axios 将得到更新

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

并在 onSave 函数中使用 setchange。

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

Answer 2

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

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

并使用如下所示的 useEffect。第一次 useeffect 将运行但由于 useeffect 中的条件是特定类型，因此它不会运行 all.and 处的 IF 块 IF 块将运行仅在提到的特定条件下以下。但请注意，useEffect 将运行每次任何依赖数组元素更改但 IF 块根本不会执行。

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

  },[layout,saving,iserror]);

如果我们将状态的默认条件放在 IF 块中，那么只有 IF 块内部效果才会运行而不是上述情况。因为我们希望 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)
      );
  }

希望对您有所帮助。

将 React 钩子中的 setState 回调替换为 useEffect 钩子，用于复杂场景不起作用

Replace of setState callback in react hook with useEffect hooks for complicated scenario not working

javascript

setstate

reactjs

react-hooks

use-effect