Как получить значения первого элемента ответа выборки

Я пытаюсь получить значения первого элемента моего запроса на выборку.

Здесь вы можете увидеть мой код -> результат запроса выборки присваивается переменной data.

const ListRezept = (props) => {
   const url_id = props.params.id;
   const [data, setData] = useState(null);
   const [isPending, setIsPending] = useState(true);
   const [error, setError] = useState(null);
  
   useEffect(() => {
    const abortCont = new AbortController();

    setTimeout(() => {
    fetch('https://abc.4.azurestaticapps.net/data-api/rest/Rezept?$filter=RezeptId eq '+ url_id)
       .then(res => {
          if (!res.ok) { // error coming back from server
            console.info("error");
            throw Error('Could not fetch the data for that resource!');
          } 
          return res.json();
       })
       .then(data => {
        setIsPending(false);
        setData(data.value);
        setError(null);
       })
       .catch(err => {
        if (err.name === 'AbortError') {
          console.info('fetch aborted')
        } else {
          // auto catches network / connection error
          setIsPending(false);
          setError(err.message);
        }
       });
 }, []);

     // abort the fetch
     return () => abortCont.abort();
 }, []) 
 }

Структуру возвращаемого data.value (после json()-парсинга) вы можете увидеть здесь структура разобранного data.value

Как я могу присвоить первый элемент возвращаемого значения «json()» переменной? Позже я хочу передать эту переменную «данные» на другую страницу и работать с этими значениями в Гэтсби.

Псевдокод:

// assign first element to a variable
const aenderungsdatum = data[0].aenderungsdatum

🤔 А знаете ли вы, что...
JavaScript позволяет создавать мобильные приложения для iOS и Android с использованием фреймворков, таких как React Native и NativeScript.


61
1

Ответ:

Решено

Ваша проблема, видимо, в этом фрагменте кода:

       .then(data => {
        setIsPending(false);
        setData(data.value);
        setError(null);
       })

Третья строка должна быть setData(data.data.value). И станет понятнее, если вы переименуете параметр лямбда во что-то вроде json:

       .then(json => {
        setIsPending(false);
        setData(json.data.value);
        setError(null);
       })

Дополнительная проблема: у вашего объекта нет свойства value, как показано на скриншоте. Итак, окончательный код должен выглядеть так:

       .then(json => {
        setIsPending(false);
        setData(json.data);
        console.info(`last change: ${json.data[0]['Aenderungsdatum']`);
        setError(null);
       })