Question

我正在尝试使用react-hook-forms来创建一个react表单，但是我无法显示从API调用中检索到的数据。

我已经将example（用于异步设置表单值）和这个example（用于处理嵌套数组）组合在一起。

但是对于我的一生，我根本无法使它正常工作。 API的JSON输出如下所示：

{"daily": { "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 }]}, 
 "weekly": {/*Similar to daily*/}}

以下是功能组件：

const UserTaskForm = (data) => {
    const [TaskId, setTaskId] = useState();
    const [TaskArray, setChallengeArray] = useState([]);
    const { register, control, handleSubmit, getValues, reset, errors } = useForm();
    const onSubmit = (formData) => {console.log(formData);};

    useEffect(() => {
        async function fetchData() {
            try {
                let result = await dbGetUserTasks(data.userId);
                console.log(result);
                const tempArray = [];
                const formData = JSON.parse(result[0].challenges);
                tempArray.push(formData.daily);
                tempArray.push(formData.weekly);
                setTaskId(JSON.parse(result[0].id));
                setChallengeArray(tempArray);
            } catch (error) { console.error(error); }
        }

        fetchData();
    }, []);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <Box paddingTop={2} paddingBottom={2}>
                <Button type="submit" style={{ marginLeft: "auto" }}>Save Changes</Button>
            </Box>
            {TaskArray ? <Spinner animation="border" /> : <TaskTypeCards{...{ control, register, TaskArray, getValues, errors }} />}            
        </form>     
    );
}

export default UserTaskForm;

这是调用的功能组件：

export default function TaskTypeCards({ control, register, defaultValues, errors }) {
    console.log(defaultValues); // <--------------- Undefined.
    const { fields, append, remove } = useFieldArray({ control, name: "test" });

    useEffect(() => {
        console.log(defaultValues); // <--------------- Undefined.
    }, [defaultValues])

    return(
        {defaultValues.map((challenge, index) => {
            return (
                <Card>
                    Blah blah this doesn't work anyway
                </Card>
            )
        })}
    )
}

我了解到在UserTaskForm中触发useEffect之前已渲染组件，但是如何重新渲染它，以使defaultValues中的TaskTypeCards不会注销undefined？

Answer 1

defaultValues需要作为props传递，才能在TaskTypeCards组件中作为props接收。

谢谢

React钩子形式useEffect不会通过调用另一个组件来重新渲染功能组件

1 个答案: