Как получить данные, чтобы они отображались в useState?

#reactjs

Вопрос:

 const { recipeId } = useParams();  const { loading, data } = useQuery(QUERY_SINGLE_RECIPE, {  variables: { recipeId: recipeId }, });  // THESE CODES HERE SHOULD GRAB THE RECIPE AND LOAD THE PRESET DATA // INTO THE RESPECTFUL AREAS OF THE FORM const recipe = data?.recipe || {}; // console.log('recipe'); // console.log(recipe);  let ingredientList = ['']; if (recipe?.ingredients) {  for (let a = 0; a lt; recipe.ingredients.length; a  ) {  ingredientList  = (recipe.ingredients[a]   'rn');  // console.log(ingredientList);  } }  let directionList = ['']; if (recipe?.directions) {  for (let b = 0; blt; recipe.directions.length; b  ) {  directionList  = (recipe.directions[b]   'rn');  // console.log(directionList);  } }  // THESE NEXT CODES SHOULD, IN MOST BASIC TERMS, USE A USESTATE TO BASICALLY  // CREATE AN UPDATED RECIPE. SHOULD HAVE THE SAME CODE AS THE ADD/CREATE NEW RECIPE const [updateRecipe, setUpdateRecipe] = useState({  title: recipe.title,  category: recipe.cateogry,  servings: recipe.servings,  totalTime: recipe.totalTime,  ingredients: recipe.ingredients,  directions: recipe.directions,  imageid: recipe.imageid });

Когда консоль вошла в систему, updateRecipe отображается как объект с неопределенным значением, как мне получить рецепт обновления, чтобы отобразить объект, который позже будет обновлен в форме?

1. Я думаю, что ответ Якобо находится на правильном пути, пусть ваш рецепт обновления начнется как пустой объект, затем в эффекте использования проверьте объект рецепта, а затем установите значение setUpdateRecipe({…рецепт}) Также я думаю, что в ваших циклах for вы захотите использовать список ингредиентов[0] = и список направлений[0] =. или вам следует использовать .push (), если вы хотите добавить их в массив, а не пустую строку в вашем массиве.

Ответ №1:

Проблема, с которой вы столкнулись, заключается в том, что вы не реагируете на обновление состояния. Если я не ошибаюсь (я не вижу, какие библиотеки вы используете), useQuery он запрашивает что-то из API GQL. data будет реактивной переменной, для которой вам придется использовать useEffect крючок, чтобы отреагировать на это изменение. Поэтому, если вы добавите

 useEffect(()=gt;{  console.log(data) },[data]);

Вы должны получить данные, как только они будут получены с сервера, и обновить состояние в функции useEffect обратного вызова.