Объясните пожалуйста как работать с fetch

Question

Я пытаюсь фетчить данные с сервера и передавать их через пропсы компонентам react. Однако fetch и result.json() возвращают промисы, а мои пропы принимают кастомные типы данных - объект с определенными полями. TS ругается на то что я пытаюсь передать тип Promise из фетча и я не понимаю как передать данные компоненту после того как данные станут доступны с сервера. Я использую mobx, однако не могу обновить store через action по той же причине, что и передать пропсы - фетч возвращает промис. Объясните пожалуйста что вообще происходит и как добиться обновления store\передачи данных через пропсы.

useEffect(()=>{
        const data = async () => {
            const result = await fetch(ServerURLS.ALL, {method:'GET'})
            return await result.json()
        }
        action(()=>store.todoStore.toDoList = data()) //здесь TS говорит что data типа Promise
    }

Answer 1

Внутри useEffect можно сделать так:

const data = async () => {
  const result = await fetch(ServerURLS.ALL, {method: 'GET'})
  return await result.json()
}
data().then(res => {
  store.todoStore.toDoList = res;
  // Ваши действия с данными
})

Или вот так

fetch(ServerURLS.ALL, {method:'GET'})
.then(result => result.json())
.then(result => {
  store.todoStore.toDoList = result;
  // Ваши действия с полученными данными
})

Answer 2

Я пытаюсь фетчить данные с сервера и передавать их через пропсы компонентам react. Однако fetch и result.json() возвращают промисы, а мои пропы принимают кастомные типы данных - объект с определенными полями.

По TS я не спец... Но вот пример с простым Реактом. В примере я показал чтение данных. Это некий список пользователей. В пример есть и передача пропсов...

//
function App() {
  const [arr, setArr] = React.useState([])
  const [ok, setOk] = React.useState(false)
  React.useEffect(_ => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(res => {
        setArr(res)
        setOk(true)
      })
      .catch(console.log)
  }, [])
  return <div>
    {ok ? <List arr={arr} /> : <Loading />}
  </div>
}
//
function Loading() {
  return <p>Чтение данных...</p>
}
//
function List({arr}) {
  return <ul>
    {arr.map(o => <User key={o.id} data={o} />)}
  </ul>

}
//
function User({data}) {
  return <li>
    {data.name}
  </li>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="like_button_container"></div>

БЛОГ НА HUSL

Объясните пожалуйста как работать с fetch

Ответы (2 шт):