Как получить результат fetch в react?

Question

[historydev]

Как получить данные на клиенте при помощи fetch в реакте?

export default function GetContent() {

    const GetData = () =>  {

        return fetch('/scrap', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                query: 'Ромашка',
                type: 'ul'
            })
        }).then(data => data.json());

    };

    return (
        <div>
            <GetData />
        </div>
    )
}

Answer 1

[Тигран Абрамян]

import React, { useEffect } from 'react';

export default function GetContent() {

  const GetData = () =>  {
    ...
  };

  useEffect(() => {
		GetData().then(res => console.log(res));
  }, []);

  return (
    <div>
      	
    </div>
  )
}

Comments

[historydev]

Я тоже к этому пришёл, запрос на сервер не идёт, получаю ошибку:

searchContent.js:9 POST localhost:3000/scrap 405 (Method Not Allowed)
getData @ searchContent.js:9
(anonymous) @ searchContent.js:29
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
(anonymous) @ react-dom.development.js:25240
workLoop @ scheduler.development.js:641
flushWork @ scheduler.development.js:596
performWorkUntilDeadline @ scheduler.development.js:203
searchContent.js:20 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at getData (searchContent.js:20)

export default function GetContent() {

    const [data, setData] = useState();

    const getData = async() =>  {

        const res = await fetch('/scrap', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                query: 'Ромашка',
                type: 'ul'
            })
        });

        const Data = await res.json();

        console.log(Data);

        setData(Data);

    };

    useEffect(() => {
        getData().then(r => console.log(r));
    }, []);

    return (
        <div>
            {data}
        </div>
    )
}

[historydev]

Я такой идиот, прошу прощения, я всё перепробовал, а запрос то идёт на сервер которого нет! У меня приложения на разных портах, извиняюсь ещё раз. Спасибо большое.