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

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

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

用钩子实现这个不是一个好主意。车辆状态和更新应该在 Vehicles 组件内。 class 中不需要 useState。 VehicleForm 应该是一个无状态组件并且应该接收回调来更新车辆。

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

useState 不设置变量

useState not setting variable

reactjs

react-hooks