0

React フック useReducer を使用して、複雑な多層フォーム データを状態で処理しています。

このチュートリアルの指示に従いました: https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937。

チュートリアルでは、チェックボックスの状態は状態オブジェクトの最上位に設定されています。ただし、私のチェックボックスは最上位レイヤー (正確にはレイヤー 3) の下にあります。問題は、私のチェックボックスコンポーネントがその状態値を変更することですが、レベル3にあるはずの場所ではなく、最上位に配置されることです.

チュートリアルの State
isMemberが最上位にある

const initialState = {
  firstName: "",
  lastName: "",
  address: {
    addressLine1: "",
    addressLine2: "",
    pinCode: ""
  },
  isMember: false
};

私の状態
が有効になっているのは最上位レベルより下です

const initState = 
{
  radio:{
    tx: {
      name:'',
      enabled:'',//THIS IS WHERE THE STATE SHOULD CHANGE.
      parameters:{
        frequency:'',
        bandwidth:'', 
      },
    },
  }
  //BUT THIS IS WHERE IT IS GETTING SET.
};

以下は updateForm 関数の私の実装です:

const updateForm = React.useCallback(({ target: { value, name, type } }) => {
    const updatePath = name.split(".");
    console.log("updateForm | updatePath: ", updatePath);

    // Set top-level key-pairs.
    // Just need specific component & value to update.
    if (updatePath.length === 1) {
      const [id] = updatePath;

      dispatch({
        type: "TF",
        [id]: value
      });
    }

    // Set key-pairs that're below top-level.
    // Need "path" to component ('name') & value to update.
    // More condensed solution, rather than multiple if(length === 3,4,...).
    if (updatePath.length >= 2) {
      // Set checkboxes.
      if (type === "checkbox") {
        let elem = updatePath[updatePath.length - 1];

        dispatch(prevState => ({
          [name]: !prevState[name]
        }));
        return;
      }

      dispatch({
        _path: updatePath,
        _value: value
      });
    }
  }, []);

ディスパッチ関数とレデューサー関数に対してさまざまなアプローチを試みました。また、ディスパッチ関数とレデューサー関数の関係を理解し​​ようとしましたが、レデューサーのアクション パラメーターが関数型の場合に何が起こっているのかを理解するのに役立つものは見つかりませんでした。

チュートリアルのチェックボックスのディスパッチ/リデューサー機能の関係で何が起こっているのかを理解するために、あなたの助けを本当に使うことができました. 私が調査したところ、これはレデューサーのアクション パラメーターのコンストラクター型を使用して決定を行う唯一の実装です (コンストラクター === 関数 & コンストラクター === オブジェクトを使用)。私が理解していることから、通常は代わりに switch() ステートメントが使用されており、オンラインで見つけることができたのはそれだけです。

また、チェックボックスを取得して状態の値を正しく変更する方法を理解するために、あなたの助けを借りることもできます。基本的に、最上位レイヤーの下にあるこのコンポーネントの状態を変更するにはどうすればよいですか?

4

1 に答える 1