Реакция: передача опоры с событием для setState

Это должен быть единственный useState хук? Я бы рекомендовал использовать useReducer или немного упростить его с помощью нескольких useState ловушек.

Несколько 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, чтобы добиться того же.

Вот пример с 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 атрибут name.
2. Тогда вместо этого используйте [e.target.name]

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

Воспользуйтесь помощником lodash _.set.

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

Кстати, в вашем существующем updateSomeStatePhone вы изменяете объект prevState, который должен быть неизменным.