我使用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的误用,但我不得不依赖它来使我的异步获取函数正常工作。
2条答案
按热度按时间wrrgggsh1#
不要重复状态。
子组件正在复制它收到的第一个版本,然后在它自己的状态中使用那个版本。没有任何东西更新这个状态,所以它没有理由改变。但是为什么要在子状态中有一个单独的版本开始?
如果数据是作为prop传递的,则使用该prop。从子组件中完全删除状态,直接使用prop。这样,当父组件重新呈现时,子组件将使用更新后的prop值。
dgsult0t2#
当prop更新时,您应该更新子组件中的状态,因为您只在构造函数中设置子组件中的状态: