Пользовательский интерфейс не перерисовывается при обновлении состояния с использованием React Hooks и отправки формы - PullRequest
Новая
       2

Пользовательский интерфейс не перерисовывается при обновлении состояния с использованием React Hooks и отправки формы

0 голосов
/ 25 апреля 2019

Я пытаюсь обновить пользовательский интерфейс, используя React Hooks и форму.У меня установлено состояние для отслеживания значения в форме, и когда я нажимаю кнопку отправить, я хочу добавить это значение в массив (в состоянии) и отобразить его в пользовательском интерфейсе.Моя проблема заключается в том, что когда я отправляю значение, хотя оно добавляется в массив (и состояние обновляется), пользовательский интерфейс обновляется только при изменении значения на входе.

Мой компонент выглядит следующим образом: 

const PushToArrayUpdateState = () => {

    const [array, setArray] = useState([]);
    const [formVal, setFormVal] = useState(``);

    const handleSubmit = event => {
        event.preventDefault();
        let updateArray = array;
        updateArray.push(formVal);
        console.log(updateArray);
        setArray(updateArray);
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="arrayVal" onChange={e => setFormVal(e.target.value)} />
                <input type="submit" value="Submit" />
            </form>
            <div>
                {array.map((val, index) => <p key={index}>{val}</p>)}
            </div>
        </div>
    );
};

Вы также можете видеть, что это [не] работает на: https://codesandbox.io/s/p3n327zn3q

Кто-нибудь получил какие-либо предложения относительно того, почему setArray в функции handleSubmit не вызывает автоматический перезапуск компонента-render

1 Ответ

0 голосов
/ 25 апреля 2019

Вместо 

let updateArray = array;

Попробуйте: 

const updateArray = [...array];

https://codesandbox.io/embed/qxk4k3zmzq

Поскольку массивы в JS являются ссылочными значениями, поэтому при попытке их скопироватьиспользование = будет копировать только ссылку на исходный массив.

...