Реагирует на ошибку handleChange с двумя компонентами

Question

Я хочу вызвать handleChange события из второго компонента

Основной компонент:

  const [state, setState] = useState({ step: 1, saleDate: new Date(), customer: '' });

  function nextStep() {
    const { step } = state;
    setState({
      step: step + 1
    });
  };

  function prevStep() {
    const { step } = state;
    setState({
      step: step - 1
    });
  };

  function handleChange(e) {
    setState(e.target.value);
  };


  const { step } = state;

  switch (step) {
    case 1:
      return <SaleStepDate
        nextStep={nextStep}
        handleChange={handleChange}
        values={state} />
  }
}

и второй компонент, здесь ошибка

const SaleStepDate = (props) => {

  function continueStep(e) {
    e.preventDefault();
    props.nextStep();
  };

  const { values, handleChange } = props;

  return (
      <TextField
         placeholder="Nombre cliente"
         label="Cliente"
         name="customer"
         margin="normal"
         fullWidth="true"
         onChange={handleChange('customer')}
       />
  )
}

ошибка во втором компоненте в событии textField onChange = {handleChange ('customer')}

TypeError: Невозможно прочитать свойство 'value' из неопределенного

, пожалуйста ПОМОГИТЕ

Answer 1

Несколько проблем с вашим кодом,

Во-первых, потому что вы храните несколько ключей в одном state объекте, выполнив что-то вроде -

---

 setState({
  step: step + 1
});

---

Вы удаляете весь другой контент на этом объекте. Распространение остальных данных

---

setState({
  ...state,
  step: step + 1
});

---

Что касается handleChange, то, на мой взгляд, это должно выглядеть примерно так

---

 function handleChange(e) {
   const { name, value } = e.target
   setState(...state, [name]: value);
 };

---

и может вызываться как

---

  onChange={e => handleChange(e)} 

---

name будет атрибутом имени элемента HTML, value содержимого внутри ввода

Answer 2

Не выполнять функцию handleChange при назначении на onChange.

При выполнении onChange={handleChange('customer')} сначала будет вызываться handleChange функция с customer в качестве аргумента, поэтому вы получаете Cannot read property 'value' of undefined как ошибка.

Не уверен, что нужно для значения customer, но если вы просто хотите вызвать handleChange с event, вы можете изменить код так:

<TextField
         placeholder="Nombre cliente"
         label="Cliente"
         name="customer"
         margin="normal"
         fullWidth="true"
         onChange={handleChange} //here
       />

Редактировать: Также, если вы хотите передать customer, используйте функцию стрелки:

onChange={(e) => handleChange(e, 'customer')} 

Обновление состояний в useState по умолчанию не обновляет весь объект, Обновление переменной состояния всегда заменяет вместо слияния.

 function handleChange(e) {
    const customer = e.target.value;
    setState(prevState => {
      return {
        ...prevState,
        customer
      };
    });
  }