Javascript 来自异步源的带有嵌套字段数组的React钩子窗体返回空数组

在这组嵌套数组之后，我尝试显示以下数据：

 { array: [
    {
        { "last_received_date": "2020-08-03 11:04:18 UTC+8", "tasks": [
            { "id": "1", "freq": "d", "prog": 0, "max": 5, "reward": 1000 },
            { "id": "2", "freq": "d", "prog": 0, "max": 1, "reward": 1000 },
            { "id": "3", "freq": "d", "prog": 0, "max": 3, "reward": 1000 }]
        }
    }, 
    { everything like above but more }
]}

这是一个很长的问题，我自己也不太精通，所以请耐心听我说我的问题是，如果进一步探测或查询，嵌套字段中的

字段

将返回一个空数组。这里是我制作的沙盒的一个示例（我可以模拟它）

下面是嵌套字段：

export default function TaskFields({ nestIndex, control, register, errors }) {
    const { fields, remove } = useFieldArray({ control, 
        name: `array[${nestIndex}].challenges` 
    });
    const indexMap = ['Daily', 'Weekly'];
    return (
        <Box>
            {fields.map((task, j) => { // Should repeat thrice, but fields is apparently empty
                return (
                <Box key={j}>
                    <Button variant="danger" onClick={() => {remove(j);}} size="small" }>x</Button>
                    ID: <input name={indexMap[nestIndex] + `task[${j}].id`}  ref={register()} defaultValue={task.id} />                     
                    Freq: // Same as above
                    Prog: // Same as above
                    Max Prog: // Same as above
                    Reward: // Same as above
                </Box> );
            })}
        </Box> );
}

上面的工作正常，并显示两个带有

上次接收日期的框，这意味着
字段保留了我需要的表单数据，如下所示：

export default UserTaskForm (data) {
    const [challengeData, setChallengeData] = useState({});
    const { register, control, handleSubmit, setError, reset, errors } = useForm(challengeData);
    useEffect(() => {
        async function fetchData() {
            let result = await dbGetUserTasks(data.userId); // Gets results from API
            let challengeData = JSON.parse(result[0].data)); // Looks like the data above
            setChallengeData(challengeData);
            reset(challengeData);
        }
        fetchData();        
    }, [reset]);    
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <Button type="submit" style={{ marginLeft: "auto" }}>Save Changes</Button>
            {challengeData ? <TaskTypeCards {...{ control, register, errors }} /> : null}
        </form> );
}

导出默认UserTaskForm（数据）{
const[challengeData，setChallengeData]=useState（{}）；
const{register，control，handleSubmit，setError，reset，errors}=useForm（challengeData）；
useffect（（）=>{
异步函数fetchData（）{
let result=await dbGetUserTasks（data.userId）；//从API获取结果
让challengeData=JSON.parse（结果[0].data））；//看起来像上面的数据
setChallengeData（challengeData）；
重置（挑战数据）；
}
fetchData（）；
}，[reset]）；
返回(
保存更改
{challengeData？：null}
);
}

因此，我剩下的是两个框，其中包含
上次接收的数据
，但没有列出其中列出的任务，这与我上面链接的示例相去甚远

我尝试将
数组[${nestIndex}].challenges
替换为TaskFields的
名称
中的
数组
，然后将
字段.map
替换为
字段[nestIndex]。challenges.map
在显示数据时起作用，但“删除”按钮会删除数组下的整个对象，不是任务下的对象，可能是因为
fields
there设置为array

有什么我遗漏的吗？
我在这里看到两件事需要注意

首先，嵌套的是
任务
而不是
挑战

//UserTaskFields.js
// ...
const{fields，remove}=useFieldArray({
控制
名称：`array[${nestIndex}].tasks`，
})
// ...

其次，如果对象不是空的，则使用默认状态为空对象的
challengeData
{}
有条件地进行渲染。但是您可能不记得
Boolean（{}）===true
，因此即使在获取数据之前，您也会意外地从一开始进行渲染。因此，解决方案可能是使用
Object.keys（challengeData）.length>0
，或者为了简单起见，只使用
fetched
的布尔值


const x={}
console.log（布尔值（x））
console.log（x？'foo'：'bar'）
你能在codesandbox上复制这个吗？@hgb123，我会试试，并发布一个链接。不过，我不确定如何进行API调用。您可以通过json模拟数据file@hgb123here哎呀，我忘了这些了，我通常在网上发布之前重命名我的变量，以防万一。不管怎么说，谢谢，“抓取”真的做到了。
export default UserTaskForm (data) {
    const [challengeData, setChallengeData] = useState({});
    const { register, control, handleSubmit, setError, reset, errors } = useForm(challengeData);
    useEffect(() => {
        async function fetchData() {
            let result = await dbGetUserTasks(data.userId); // Gets results from API
            let challengeData = JSON.parse(result[0].data)); // Looks like the data above
            setChallengeData(challengeData);
            reset(challengeData);
        }
        fetchData();        
    }, [reset]);    
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <Button type="submit" style={{ marginLeft: "auto" }}>Save Changes</Button>
            {challengeData ? <TaskTypeCards {...{ control, register, errors }} /> : null}
        </form> );
}