空道具发送到子组件而未更新?

Question

我使用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对象，它会重复几次日志，在前三个左右的日志中显示空的默认数据集，然后在最后几个日志中显示填充的数据。在子对象中记录接收到的道具每次都会显示空数据。我已经尝试创建一个新的对象和解构，在发送的道具列表，但它成为受害者相同的初始数据显示问题。

我怀疑这是React的误用。UseEffect，但我不得不依赖它来让我的异步取回功能正常工作。对不起，如果我的代码和结构有点乱，仍然是新的JavaScript

Answer 1

请勿复制状态。

子组件正在复制它接收到的第一个版本，然后在自己的状态中使用该版本。没有任何东西更新这个状态，所以没有理由改变它。但是为什么要在子状态下创建一个单独的版本呢?

如果数据是作为prop传递的，则使用该prop。从子组件中完全移除状态，直接使用该道具。这样，当父组件重新渲染时，子组件将使用更新后的prop值。

Answer 2

当props被更新时，你应该在子组件中更新你的状态，因为你只在构造函数中设置了子组件的状态:

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: ''
}
}
}