useState не установка переменной - PullRequest
Новая
       15

useState не установка переменной

0 голосов
/ 23 марта 2019

Я запутался, почему useState не устанавливает переменную из ее аргумента, props.

Фрагмент: 

import React, { useState } from 'react';

const FormContainer = (props) => {
  console.log('[FormContainer props]', props);   // line 7
  const [prevState, setPrevState] = useState(props);
  console.log('[FormContainer]', prevState);     // line 9

props содержит объект, но хук не устанавливает prevState. Это undefined. Почему?

Телефонный код. Первый компонент представляет список. При щелчке строки в списке (сетке) этот компонент получает данные и отправляет их в качестве аргумента второму компоненту, FormContainer. 

import React, { Component } from 'react';
import Table from './VehicleList';
import VehicleForm from '../FormContainer';

class Vehicles extends Component {
  state = {};

...

  render() {
    return (
      <div>

        {this.state && this.state.vehicleList && (
          <Table vehicleList={this.state.vehicleList} clicked={this.vehicleSelectedHandler} />
        )}
        {console.log('[Vehicles render selectedVehicle]', this.state.selectedVehicle)}
        <VehicleForm vehicle={this.state.selectedVehicle} />
      </div>
    );
  }

Из отладчика:

Firefox dev tools

Ответы [ 2 ]

1 голос
/ 23 марта 2019

useState принимает значение по умолчанию в качестве аргумента. Он будет установлен только при первом рендере и не будет обновляться при изменении props. Вы должны позвонить setPrevState, чтобы обновить значения.

useState используется для доступа к текущему состоянию. Если вам нужно что-то для предыдущего реквизита или предыдущего состояния, взгляните на FAQ

Не стоит реализовывать это с помощью хуков. Состояние автомобиля и его обновление должны быть внутри Vehicles компонента. Нет необходимости в useState внутри класса. VehicleForm должен быть компонентом без сохранения состояния и должен получить обратный вызов для обновления автомобиля.

Было бы трудно отслеживать изменения и обрабатывать обновления в общем FormContainer на основе всего объекта props.

1 голос
/ 23 марта 2019

Кажется, работает на меня.Не могли бы вы предоставить код, который вызывает ваш FormContainer?Какую версию React вы используете? 

const FormContainer = (props) => {
  console.log('[FormContainer props]', props);
  const [prevState, setPrevState] = React.useState(props);
  console.log('[FormContainer]', prevState);
  
  return null
}
  
ReactDOM.render(
  <FormContainer vehicle={{id: 3, number: "14", make: "Ford"}} />,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>
...