Bereaksi: Melewati Prop di w/ acara untuk setState

Apakah harus berupa satu kait useState? Saya akan merekomendasikan menggunakan useReducer atau menyederhanakannya sedikit dengan beberapa kait useState.

Beberapa useState kait

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [name, setName] = React.useState("");
  const [address, setAddress] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [mobile, setMobile] = React.useState("");
  const [home, setHome] = React.useState("");

  const getResult = () => ({
    customer: [
      {
        name,
        address,
        email,
        phone: [
          {
            mobile,
            home
          }
        ]
      }
    ]
  });

  // Do whatever you need to do with this
  console.log(getResult());

  return (
    <>
      <input
        value={name}
        placeholder="name"
        onChange={e => setName(e.target.value)}
      />
      <br />
      <input
        value={address}
        placeholder="address"
        onChange={e => setAddress(e.target.value)}
      />
      <br />
      <input
        value={email}
        placeholder="email"
        onChange={e => setEmail(e.target.value)}
      />
      <br />
      <input
        value={mobile}
        placeholder="mobile"
        onChange={e => setMobile(e.target.value)}
      />
      <br />
      <input
        value={home}
        placeholder="home"
        onChange={e => setHome(e.target.value)}
      />
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Tunggal useReducer (dengan keadaan disederhanakan)

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const reducer = (state, action) => {
  const { type, value } = action;

  switch (type) {
    case "SET_NAME":
      return { ...state, name: value };
    case "SET_ADDRESS":
      return { ...state, address: value };
    case "SET_EMAIL":
      return { ...state, email: value };
    case "SET_MOBILE":
      return { ...state, phone: [{ ...state.phone[0], mobile: value }] };
    case "SET_HOME":
      return { ...state, phone: [{ ...state.phone[0], home: value }] };
    default:
      throw Error(`Unexpected action: ${action.type}`);
  }
};

const initialState = {
  name: "",
  address: "",
  email: "",
  phone: [
    {
      mobile: "",
      home: ""
    }
  ]
};

function App() {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  // Do what you need with state
  console.log(state);

  return (
    <>
      <input
        value={state.name}
        placeholder="name"
        onChange={({ target: { value } }) =>
          dispatch({ type: "SET_NAME", value })
        }
      />
      <br />
      <input
        value={state.address}
        placeholder="address"
        onChange={({ target: { value } }) =>
          dispatch({ type: "SET_ADDRESS", value })
        }
      />
      <br />
      <input
        value={state.email}
        placeholder="email"
        onChange={({ target: { value } }) =>
          dispatch({ type: "SET_EMAIL", value })
        }
      />
      <br />
      <input
        value={state.phone.mobile}
        placeholder="mobile"
        onChange={({ target: { value } }) =>
          dispatch({ type: "SET_MOBILE", value })
        }
      />
      <br />
      <input
        value={state.phone.home}
        placeholder="home"
        onChange={({ target: { value } }) =>
          dispatch({ type: "SET_HOME", value })
        }
      />
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

useReducer adalah pilihan yang lebih baik untuk melakukan ini. Contohnya tersebar di internet.

Mengapa Anda tidak boleh menggunakan useState untuk meneruskan suatu objek adalah karena objek tersebut tidak bertindak seperti setState. Referensi objek yang mendasarinya sama. Oleh karena itu, react tidak akan pernah memicu perubahan keadaan. Jika Anda ingin menggunakan useState yang sama untuk objek. Anda mungkin harus menerapkan versi Anda sendiri untuk memperluasnya (contoh di bawah) atau Anda dapat langsung menggunakan kait useReducer untuk mencapai hal yang sama.

Berikut ini contoh dengan useState agar Anda dapat memperhatikan pembaruan status pada setiap perubahan.

const [form, setValues] = useState({
    username: "",
    password: ""
});

const updateField = e => {
    setValues({
      ...form,
      [e.target.name]: e.target.value
    });
};

Perhatikan ...form di sana. Anda dapat melakukannya di setiap pembaruan yang Anda inginkan atau Anda dapat menggunakan utilitas Anda sendiri atau useReducer seperti yang saya sebutkan.

Sekarang mengenai kode Anda, ada kekhawatiran lain.

1. Anda menggunakan phone Anda sebagai array yang bisa menjadi objek. Atau lebih baik lagi, properti terpisah juga bisa digunakan. Tidak ada salahnya.

2. Jika Anda memiliki customers sebagai array, Anda harus mengulang catatan. Tidak hanya memperbarui indeks dengan hardcoding. Jika hanya ada satu pelanggan sebaiknya tidak menyimpan array tetapi hanya sebuah objek. Dengan asumsi itu adalah array pelanggan, dan Anda mengulanginya, berikut cara memperbarui mobile.

const updatedCustomers =  state.customers.map(item => {

   const { phone } = item;
   return { ...item, phone: { mobile: e.target.value }}; 
   // returns newCustomer object with updated mobile property
});

// Then go ahead and call `setSomeState ` from `useState`
setSomeState(...someState, { customer: updatedCustomers });// newState in your case is 

Sebaliknya, saya lebih suka hanya memiliki satu pengendali onChange, dan meneruskan status dari bidang formulir untuk properti status yang saya ubah, tetapi saya tidak tahu sintaksisnya

Jika Anda belum mengetahuinya dari contoh pertama. Berikut caranya dalam langkah singkat.

1. Berikan atribut nama pada elemen HTML Anda.
2. Kemudian gunakan [e.target.name]

   return { ...item, phone: { [e.target.name]: e.target.value }}; 

Gunakan pembantu _.set lodash.

const updateSomeState = (e, prop) => {
    e.persist();
    setSomeState(prevState => {
      let customers = [...prevState.customers] // make a copy of array
      let customer = {...customers[0]} // make a copy of customer object
      _.set(customer, prop, e.target.value)
      customers[0] = customer;
      return {
        ...prevState, customers 
      };
    });
  };

BTW, di updateSomeStatePhone Anda saat ini, Anda sedang memodifikasi objek prevState yang seharusnya tidak dapat diubah.