複雑なシナリオのuseEffectフックが機能していないとフックを反応にSETSTATEコールバックを交換してください

user12893845：

こんにちは、私は私が新しい状態を設定した後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>
  )
}

私は、SETSTATEの使用量がそれでコールバックとともにありaxios.put要求の成功コールバック関数は、上記のコードのようにフックに変更することにしたいです。

リファクタリングの主要なコードがある::

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

私がやって考えていた::

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

私はフックを反応で発生する）（SETSTATEにコールバックをしたいです。親切に私に上記のコードを考慮し、これを行うための理想的な方法を提案します。

有効アルジュン：

これは、多くの人はそれが難しい取り組むために見つけることは非常にシンプルで難しいパズルです。「のisError」の一つの追加のフラグを追加したコードの下に使用し、それは確信して実行するために、完全にそのタスクを実行する::状態で：

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

以下のようなuseEffectを使用しています。初めてのuseeffectが実行されますが、useeffectでcondionsが特定の型であるため、ブロックは、特定の条件が下記のみで実行する場合、それはall.andでIFブロックを実行しません。しかしuseEffectは、任意の依存関係の配列要素の変更のたびに実行されますが、IFブロックが全く実行されないだろうということを気に。

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

  },[layout,saving,iserror]);

我々は効果内部のブロックは上記のようにそうではありませんこれは実行されます場合にのみ、その後、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)
      );
  }

それが役に立てば幸い。