useState未设置变量

Question

我很困惑，为什么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>
    );
  }

通过调试器：

Answer 1

似乎为我工作。您能否提供调用您的data的代码？您使用哪个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')
)

Answer 2

useState将默认值用作其参数。它只会在第一个渲染上设置，并且在props更改时不会更新。您应该调用setPrevState来更新值。

useState用于访问当前状态。如果您需要某些东西来使用以前的道具或以前的状态，请查看FAQ

用钩子实现它不是一个好主意。车辆状态和更新应位于Vehicles组件内部。在类内部不需要useState。 VehicleForm应该是无状态组件，并且应该收到回调以更新车辆。

很难在基于整个FormContainer对象的通用props中跟踪更改和处理更新。