React hook form useEffect не выполняет повторный рендеринг функционального компонента с вызовом другого компонента - PullRequest
Новая
       44

React hook form useEffect не выполняет повторный рендеринг функционального компонента с вызовом другого компонента

0 голосов
/ 03 августа 2020

Я пытаюсь создать форму реакции, используя формы response-hook, но у меня проблемы с представлением данных, полученных из вызова API.

Я как бы объединил этот пример , который имеет дело с асинхронной установкой значений формы, и этот пример , который имеет дело с вложенными массивами.

Но, хоть убей, я просто не мог заставить его работать. Вывод JSON API выглядит примерно так: 

{"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>
            )
        })}
    )
}

Я понимаю, что компоненты визуализируются до того, как useEffect запускается в UserTaskForm, но как мне его повторно визуализировать, чтобы defaultValues в TaskTypeCards не выходил из системы undefined?

1 Ответ

0 голосов
/ 03 августа 2020

defaultValues необходимо передать как реквизит, чтобы получить его в качестве реквизита в компонентах TaskTypeCards.

Спасибо

...