typescript 空道具已发送到子组件但未更新?

sbtkgmzw  于 2022-11-26  发布在  TypeScript
关注(0)|答案(2)|浏览(160)

我使用React和一个API来获取数据并将其预填充到表单字段中,以便用户可以编辑现有记录。
但是,子组件似乎只接收开始时创建的longhorn实体的版本,而不是API获取的版本,也无法更新。
相关父页代码:

React.useEffect(() => {
        async function getLonghorn() {
            let response = await fetch(`http://127.0.0.1:8081/longhorns/${longhornID}`, { method: 'get' })
            let data = await response.json();
            setLonghorn(await data[0]);
        };

        if (longhorn.Name === "") {
            getLonghorn();
        }

    }, [longhorn.Name, longhornID]);

    return (
        <>
            <Navbar />
            <AdminImageUploadUI type="longhorn" id={longhornID} imageList={imageList}></AdminImageUploadUI>
            <AdminEditLonghornForm {...longhorn} ></AdminEditLonghornForm>
        </>
    )

相关子组件代码:

import React from 'react'
import { render } from 'react-dom';
import GetRequest from '../../Get';

type props = {
    LonghornID: number, 
    Name: string, 
    RanchPrefix: string, 
    RoleID: number, 
    SexID: number, 
    IsExternal:number, 
    FatherLonghornID:number, 
    MotherLonghornID: number, 
    ReferenceNumber: string, 
    DOB: string, 
    Description:string};

class AdminEditLonghornForm extends React.Component<{}, {
    LonghornID: number, 
    Name: string, 
    RanchPrefix: string, 
    RoleID: number, 
    SexID: number, 
    IsExternal:number, 
    FatherLonghornID:number, 
    MotherLonghornID: number, 
    ReferenceNumber: string, 
    DOB: string, 
    Description:string,
    message: string}> 
    {

    constructor(props: props) {
        super(props)

        this.state = {
            LonghornID: props.LonghornID,
            Name: props.Name,
            RanchPrefix: props.RanchPrefix,
            RoleID: props.RoleID,
            SexID: props.SexID,
            IsExternal: props.IsExternal,
            FatherLonghornID: props.FatherLonghornID,
            MotherLonghornID: props.MotherLonghornID,
            ReferenceNumber: props.ReferenceNumber,
            DOB: props.DOB,
            Description: props.Description,
            message: ''
        }
    }

如果我console.log父对象中的longhorn对象,它会多次复制日志,在前三个左右的日志中显示空的默认数据集,然后在最后几个日志中显示填充的数据。在子对象中记录接收到的props,每次都显示空数据。我曾尝试创建一个新对象并在发送的props列表中对其进行解构,但它福尔斯受到相同的初始数据显示问题的影响。
我怀疑这是对React.UseEffect的误用,但我不得不依赖它来使我的异步获取函数正常工作。

wrrgggsh

wrrgggsh1#

不要重复状态。
子组件正在复制它收到的第一个版本,然后在它自己的状态中使用那个版本。没有任何东西更新这个状态,所以它没有理由改变。但是为什么要在子状态中有一个单独的版本开始?
如果数据是作为prop传递的,则使用该prop。从子组件中完全删除状态,直接使用prop。这样,当父组件重新呈现时,子组件将使用更新后的prop值。

dgsult0t

dgsult0t2#

当prop更新时,您应该更新子组件中的状态,因为您只在构造函数中设置子组件中的状态:

componentDidUpdate(prevProps) {
  if (JSON.stringify(prevProps) !== JSON.stringify(this.props)) {
    this.state = {
            LonghornID: this.props.LonghornID,
            Name: this.props.Name,
            RanchPrefix: this.props.RanchPrefix,
            RoleID: this.props.RoleID,
            SexID: this.props.SexID,
            IsExternal: this.props.IsExternal,
            FatherLonghornID: this.props.FatherLonghornID,
            MotherLonghornID: this.props.MotherLonghornID,
            ReferenceNumber: this.props.ReferenceNumber,
            DOB: this.props.DOB,
            Description: this.props.Description,
            message: ''
        }
  }
}

相关问题