Проблемы с назначением значения с помощью setState - PullRequest
Новая
       32

Проблемы с назначением значения с помощью setState

0 голосов
/ 11 февраля 2020

Впервые в использовании React и возникли проблемы при попытке внести изменения в текстовое поле для обновления состояния. Использование функционального компонента, в котором начальное состояние устанавливается с помощью useState.

Я уверен, что мне просто не хватает чего-то простого ... но, наконец, сдаюсь и прошу помощи.

Вот полный код для функционального компонента: 

import React, { useState } from 'react';
import Step1 from '../Element/FormStep1';

const NewForm = () => {

  let [object, setObject] = useState({
    property: {
      entry: 'string'
    }
  });

  function handleChange(event) {
    const {name, value} = event.target;
    setObject({
      ...object,
      [name]: value
    })
    console.log(object)
  };

  return (      
    <form>     
        <Step1 
          handleChange={handleChange}
          object={object}
        />                        
    </form>
  );
}

export default NewForm

И для компонента формы: 

import React from 'react';
import TextField from '@material-ui/core/TextField';
import t from 'typy'

export default function Step1(props) {

  return(
    <React.Fragment>
      <TextField
        name={t(props.object, 'property.entry').safeObject}
        type='text'
        onChange={props.handleChange}
      />
    </React.Fragment>
  );
}

Когда выполняется функция handleChange вместо замены цели свойство, оно создает новое свойство с исходным значением в качестве имени, т.е. 

object {
  property: {
    entry: 'string'
  },
  string: value //Text input
}

Намерение состоит в том, чтобы заменить значение 'строка' текстовым вводом. 

 object {
   property: {
     entry: 'value' //Text input 
   }
 }

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Так что мне удалось выяснить это после некоторого сна и дополнительных онлайн-исследований. Используя метод set из loda sh был путь к go. Поэтому в моем текстовом поле потребовалось незначительное изменение свойства name: 

<TextField
  name='property.value'
  type='text'
  onChange={props.handleChange}
/>

И после импорта набора в моем файле компонента функции import { set } from 'lodash'; я мог бы изменить функцию handleChange следующим образом: 

function handleChange(event) {
  const {name, value} = event.target;
  set(object, name, value)
  console.log(object) // to see that it worked in the console. 
}

Теперь это работает как задумано (спустя несколько часов разочарования)

Обратите внимание ... вот где я действительно нашел ответ:

https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937

0 голосов
/ 11 февраля 2020

Если вы хотите иметь объект со свойством значения, вы должны добавить {}.

Вам нужно изменить 

setObject({
  ...object,
  [name]: value
})

на 

setObject({
  ...object,
  [name]: { value } // added { }
})
...