Javascript React钩子表单使用传递的数据填充字段数组

这里的react钩子表单非常新，我在显示从API调用检索到的JSON数据时遇到了问题

这是我的页面：

class UserDataPage extends Component {
    constructor(props) {
        super(props);
        this.state = {userId: localStorage.getItem("userId") || "", newData: {}, dataId: "", isLoading: false};
    }

    dbGetData = async function (userId) { // Get Data from API here
    /*  {daily: {last_received_utc: "date", radios:[
            {id: "ID_001", frequency: "d", progress: 0, progress_max: 5, exp: 1000},
            {id: "ID_002", frequency: "f", progress: 0, progress_max: 1, exp: 1000},
        ]}, 
        monthly: {same as daily, but more}} */
        return response.data;
    };

    componentDidMount() {
        if (this.state.userId.length > 0) {
            this.setState({isLoading: true});
            this.dbGetData(this.state.userId).then((data) => {
                this.setState({isLoading: false});
                this.setState({dataId: JSON.parse(data[0].id)});
                this.setState({newData: JSON.parse(data[0].data)});
            });
        }
    }

    render() {
        const { isLoading, dataId, newData } = this.state;
        return (
            <Container className={this.props.className}>
                <Box paddingBottom={5}>
                    {isLoading && <Spinner animation="border" />}
                    <Accordion defaultActiveKey="daily_challenge">
                        <UserRadioForm dataId={dataId} newData={newData}/>
                    </Accordion>
                </Box>
            </Container>
        );
    }
}

UserDataPage.propTypes = { formData: PropTypes.object };

export default styled((UserDataPage)) ({
    "& .jumbo": {
        WebkitTextStroke: "2px black",
        color: "white",
        fontWeight: "bold",
        // backgroundImage: "radial-gradient(#ffecb3, #cddc39)"
    }
});

类UserDataPage扩展组件{
建造师（道具）{
超级（道具）；
this.state={userId:localStorage.getItem（“userId”）| |“”，newData:{}，dataId:，isload:false}；
}
dbGetData=async函数（userId）{//在此处从API获取数据
/*{每日：{上一次收到utc:“日期”，无线电：[
{id:“id_001”，频率：“d”，进度：0，最大进度：5，经验：1000}，
{id:“id_002”，频率：“f”，进度：0，最大进度：1，经验：1000}，
]}, 
每月：{与每日相同，但更多}*/
返回响应数据；
};
componentDidMount（）{
如果（this.state.userId.length>0）{
this.setState（{isLoading:true}）；
this.dbGetData（this.state.userId）。然后（（数据）=>{
this.setState（{isLoading:false}）；
this.setState（{dataId:JSON.parse（数据[0].id]）；
this.setState（{newData:JSON.parse（data[0].data）}）；
});
}
}
render（）{
const{isLoading，dataId，newData}=this.state；
返回(
{isLoading&&}
);
}
}
UserDataPage.propTypes={formData:propTypes.object}；
导出默认样式（（UserDataPage））({
“&.jumbo”：{
WebkitTextStroke：“2件黑色”，
颜色：“白色”，
fontWeight：“粗体”，
//背景图片：“径向梯度（#ffecb3，#cddc39）”
}
});

这是我的表格：

const UserRadioForm = (data) => {
    let dataId = data.dataId;
    let newData = data.newData;
    const { register, control, handleSubmit, errors } = useForm({ defaultValues: newData });
    const {fields, remove, append} = useFieldArray({control, name: "daily.radios"});
    const onSubmit = (data) => {console.log(data);};

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <Button type="submit" style={{ marginLeft: "auto" }}>Save Changes</Button>
            <Card>
                <Card.Header>
                    Daily
                </Card.Header>
                <Card.Body>
                    Last Received Date:
                    <input name={"dailylastRcvdDateRequired"} ref={register({ required: true })} defaultValue={newData.daily.last_received_utc} />
                    {/* errors will return when field validation fails  */}
                    {errors.dailylastRcvdDateRequired && <span>This field is required</span>}
                    {fields.map((item, index) => { return (
                        <Box key={index}>
                            <Card.Header>ID: {item.id}</Card.Header>
                            <Card.Body>
                                Frequency: 
                                {frequency[item.frequency] || item.frequency}
                                Progress:
                                <input name={`daily.radios[${index}].progress`} defaultValue={`${item.progress}`} ref={register({required: true})}/>
                                Max Progress:
                                <input name={`daily.radios[${index}].progress_max`} defaultValue={`${item.progress_max}`} ref={register({required: true})}/>
                                Experience:
                                <input name={`daily.radios[${index}].exp`} defaultValue={`${item.exp}`} ref={register({required: true})}/>
                            </Card.Body>
                        </Box>              
                        );
                    })}
                </Card.Body>
            </Card>
        </form>     
    );
}

export default UserRadioForm;

const UserRadioForm=（数据）=>{
让dataId=data.dataId；
设newData=data.newData；
const{register，control，handleSubmit，errors}=useForm（{defaultValues:newData}）；
const{fields，remove，append}=useFieldArray（{control，name:“daily.radios”}）；
const onSubmit=（数据）=>{console.log（数据）；}；
返回(
保存更改
每日的
最后收到日期：
{/*字段验证失败时将返回错误*/}
{errors.dailyllastrcvddaterequired&&此字段为必填项}
{fields.map（（项，索引）=>{return(
ID:{item.ID}
频率：
{频率[item.frequency]| | item.frequency}
进展：
最大进度：
经验：
);
})}
);
}
导出默认UserRadioForm；

我遇到的问题是

UserChallengeForm

中的

字段

似乎没有任何内容。在将其设置为

defaultValues

之前，我先将其注销，它确实在那里有一些值，但出于某种原因，它不需要。因此，当

字段为空时，表单永远不会真正生成（.map失败）。有什么我错过的吗

此外，这只考虑了每日广播。我不知道如何显示每月。第二个
字段
？
我认为您需要对异步数据使用
重置
。我认为您需要对异步数据使用
重置
。