无法更新 Typescript React 中的子功能组件

Question

抱歉，如果我解释得不好，我是打字稿编程的新手。 我正在尝试开发一个用于创建和编辑订单表格的工具。 我想在其他模块中重用表单的代码，所以我尝试使这部分成为由父表单加载的功能组件。 我使用接口对象作为道具将表单数据传递给子项。 我有相同的接口对象作为父窗体状态的一部分。 我可以使用父表单上的按钮成功更新状态。我可以看到子组件的道具更新以匹配。 子组件的元素未更新。 当对象重新初始化时，子组件的状态似乎没有更新。 我不明白为什么，因为我使用扩展运算符传递道具。

我将代码简化为单个文件，参数少得多，并使用虚拟承诺来代替我加载数据的方法。 此代码给出与完整程序相同的结果，因此它应该足以进行调试：

import * as React from 'react';
import { useState } from 'react';

export interface IChildFormParameters{
  Name?: string;
  Description?: string;
  CheckBoxState?: boolean;
}

const ChildFunctionalComponent : React.FC<IChildFormParameters> = (props:IChildFormParameters) => {

  const [checked, setChecked] = useState({
      CheckBoxState: props.CheckBoxState,
  });

  const [state, setState] = useState({
      Name: props.Name,
      Description: props.Description,
  });

  const handleChecked = (e:React.ChangeEvent<HTMLInputElement>):void => {
      setChecked({
          ...checked,
          [e.target.name]: e.target.checked,
      }); 
  }

  const handleChange = (e:React.ChangeEvent<HTMLInputElement>):void => {
      setState({
        ...state,
        [e.target.name]: e.target.value,
      })
  } 

  console.log(props);
  console.log((state.Name ?? ' ') + ', ' + (state.Description ?? ' ') + ', ' + checked.CheckBoxState);
  
      return (
          <div>
              <input name="CheckBoxState" type="checkbox" checked={checked.CheckBoxState} onChange={handleChecked}/>
              <input name="Name" type="text" value={state.Name} onChange={handleChange}/>
              <input name="Description" type="text" value={state.Description} onChange={handleChange}/>
          </div>
      )
}

export default function Childcomponentfunction(props:any): JSX.Element {
  
    const [state,setState] = useState({
      formParams: {CheckBoxState:true, Name:'Joe', Description:'Somebody'} as IChildFormParameters,
    });

    async function FillForm(){
      const params = await LoadForm();
      console.log(params);
      setState({ "formParams": params});
    }

    async function LoadForm() : Promise<IChildFormParameters> {
      return {CheckBoxState:false, Name:'Paul', Description:'Nobody'} as IChildFormParameters;
    }

    return (
      <section>
        <div>
          <h1>  Component Below: </h1>
          <h2>  <ChildFunctionalComponent { ... state.formParams }/>  </h2>
          <h3>  <button name="LoadForm" type="submit" onClick={FillForm}>Submit Form</button></h3>
        </div>
      </section>
    );
}

加载表单时，ChildComponentfunction 状态参数将记录到控制台：{CheckBoxState: true, Name: 'Joe', Description: 'Somebody'} 我可以看到 ChildFunctionalComponent 的状态与记录到控制台的状态相同：Joe，Somebody，true

当我单击“加载表单”按钮时，ChildComponentfunction 状态参数将按预期更新：{CheckBoxState: false, Name: 'Paul', Description: 'Nobody'} ChildFunctionalComponent 属性已更新以匹配控制台日志。 ChildFunctionalComponent 状态未更改

Answer 1

initialState：您希望初始状态的值。它可以是任何类型的值，但函数有特殊的行为。 初始渲染后将忽略此参数。 - 链接

你需要有一个观看道具变化的效果来更新

checked

和

state

React.useEffect(() => {
    props.CheckBoxState !== undefined &&
      setChecked({ ...checked, CheckBoxState: props.CheckBoxState });
    setState({ ...state, Name: props.Name, Description: props.Description });
}, [props]);

工作示例：https://stackblitz.com/edit/vitejs-vite-ckzpwe?file=src%2FApp.tsx&terminal=dev