React: ส่ง Prop ด้วยเหตุการณ์สำหรับ setState

จำเป็นต้องuseStateฮุกตัวเดียวมั้ย? ฉันอยากจะแนะนำให้ใช้ useReducer หรือทำให้ง่ายขึ้นเล็กน้อยด้วย useState hooks หลายอัน

ตะขอ useState หลายอัน

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

เดี่ยว useReducer (พร้อมสถานะแบบง่าย)

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 เป็นตัวเลือกที่ดีกว่าสำหรับการทำเช่นนี้ ตัวอย่างทั่วอินเทอร์เน็ต

เหตุใดคุณไม่ควรใช้ useState เพื่อส่งผ่านวัตถุ เพราะมันไม่ทำงานเหมือน setState การอ้างอิงวัตถุต้นแบบจะเหมือนกัน ดังนั้นปฏิกิริยาจะไม่ทำให้เกิดการเปลี่ยนแปลงสถานะ ในกรณีที่คุณต้องการใช้ useState เดียวกันสำหรับวัตถุ คุณอาจต้องใช้เวอร์ชันของคุณเองเพื่อขยายสิ่งนั้น (ตัวอย่างด้านล่าง ) หรือคุณสามารถใช้ โดยตรง useReducer hook เพื่อให้บรรลุผลเช่นเดียวกัน

นี่คือตัวอย่างที่มี useState เพื่อให้คุณสังเกตเห็นการอัปเดตสถานะทุกครั้งที่มีการเปลี่ยนแปลง

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

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

สังเกต ...form ในนั้น คุณสามารถทำได้ในทุกการอัปเดตที่คุณต้องการ หรือคุณสามารถใช้ยูทิลิตี้ของคุณเองหรือ useReducer ตามที่ฉันได้กล่าวไว้

มาถึงโค้ดของคุณแล้ว ยังมีข้อกังวลอื่นๆ อีก

1. คุณกำลังใช้ phone ของคุณเป็นอาร์เรย์ซึ่งสามารถเป็นวัตถุได้ หรือดีกว่านั้นคุณสมบัติที่แยกจากกันก็ทำเช่นกัน ไม่มีอันตราย.

2. หากคุณมี customers เป็นอาร์เรย์ คุณจะต้องวนซ้ำระเบียนต่างๆ ไม่ใช่แค่อัพเดตดัชนีด้วยฮาร์ดโค้ด หากมีลูกค้าเพียงรายเดียวก็ไม่ควรเก็บอาร์เรย์ไว้ แต่เป็นเพียงวัตถุ สมมติว่าเป็นอาร์เรย์ของลูกค้า และคุณกำลังวนซ้ำ ต่อไปนี้คือวิธีอัปเดต 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 

แต่ฉันอยากให้มีตัวจัดการ onChange เพียงตัวเดียวและส่งผ่านสถานะจากฟิลด์แบบฟอร์มสำหรับทรัพย์สินของรัฐที่ฉันกำลังเปลี่ยนแปลง แต่ฉันไม่สามารถเข้าใจไวยากรณ์ได้

หากคุณไม่ได้เข้าใจสิ่งนั้นจากตัวอย่างแรก ต่อไปนี้เป็นวิธีการในขั้นตอนสั้นๆ

1. กำหนดแอตทริบิวต์ชื่อให้กับองค์ประกอบ HTML ของคุณ
2. จากนั้นใช้ [e.target.name] แทน

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

ใช้ตัวช่วย _.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 ใน updateSomeStatePhone ที่มีอยู่ของคุณ คุณกำลังแก้ไข prevState วัตถุซึ่งควรจะไม่เปลี่ยนรูป