Question

在此example嵌套数组之后，我试图显示以下数据：

 { 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 }
]}

这是一个很长的时间，我本人对反应钩子并不精通，所以请多多包涵。 我的问题是，如果进一步探测或查询嵌套字段中的fields会返回一个空数组。这是我制作的沙箱中的link（据我所知可以模仿它。）

这是嵌套字段：

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> );
}

注意name: array[${nestIndex}].challenges部分；如果通过console.log显示，它将返回一个空数组。如果我从中删除[${nestIndex}].challenges，它将返回完整的数据集（array的值）。但是数据的外部部分已经在这里处理并显示：

主要字段：

export default function TaskTypeCards({ control, register, errors }) {
const { fields } = useFieldArray({ control, name: "array" });   
const indexMap = ['Daily', 'Weekly'];
return (
    <Box>
        {fields.map((item, i) => { // Will repeat twice, since there are two objects in the array
            return (
                <Box key={i}>
                    Title: {indexMap[i]}
                    Last Received Date: // This will display the last received date
                    <TaskFields data={item} nestIndex={i} {...{ control, register, errors }}/> 
                    // This should display the array of objects in 'tasks'
                </Box>
            )
        })}
    </Box> );
}

上面的方法工作正常，并显示两个带有Last Received Date的框，这意味着fields保留了以下表单中所需的数据：

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> );
}

所以我剩下的是Last Received Data的两个方框，但是其中没有列出任何任务，这与我上面链接的示例相去甚远。

我尝试在TaskFields的array[${nestIndex}].challenges中仅将array替换为name，然后将fields.map替换为fields[nestIndex].challenges.map显示数据，但“删除”按钮的确删除了整个数组下的对象，而不是任务下的对象，大概是因为fields已设置为数组。

有什么我想念的吗？

Answer 1

我在这里看到两件事要注意

首先是嵌套的是tasks而不是challenges

// UserTaskFields.js
// ...
const { fields, remove } = useFieldArray({
  control,
  name: `array[${nestIndex}].tasks`,
})
// ...

第二，您使用challengeData（默认状态为空对象{}）来在对象不为空的情况下有条件地进行渲染。但是您可能不记得那个Boolean({}) === true，所以即使在获取数据之前，您也从头开始不小心渲染了。因此，一种解决方案可能是改用Object.keys(challengeData).length > 0，或者为了简单起见，只使用布尔值fetched

const x = {}

console.log(Boolean(x))

console.log(x ? 'foo' : 'bar')

// UserTaskForm.js
const [challengeData, setChallengeData] = useState({});
const [fetched, setFetched] = useState({});
// ...

// This will always render because Boolean({}) return true
{challengeData ? <TaskTypeCards {...{ control, register, errors }} /> : null}

// => should be
{Object.keys(challengeData).length > 0 ? <TaskTypeCards {...{ control, register, errors }} /> : null}

// => other way
{fetched? <TaskTypeCards {...{ control, register, errors }} /> : null}

下面是我的修复后的分支代码和框

使用来自异步源的嵌套字段数组对钩子表单进行反应，返回空数组

1 个答案: