React Function Component - Fetch (Ajax)

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React > Function Component

1 - About

3 - Example

function MyComponent() {
   const [isLoaded, setIsLoaded]=React.useState(false);
   const [items, setItems]=React.useState(null);
   const [error, setError] = React.useState(null);
 
  React.useEffect(() => {
    fetch("/doc/json/items.json")
      .then(res => res.json())
      .then(
        (result) => { setItems(result.items); setIsLoaded(true);  },
        // Note: it's important to handle errors here instead of a catch() block so that we don't swallow exceptions from actual bugs in components.
        (error) => { setError(error); setIsLoaded(true);   }
      )
   });
 
   if (error) {
      return (<div>Error: {error.message}</div>);
   } else if (!isLoaded) {
      return (<div>Loading...</div>);
   } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
}
  • Rendering
ReactDOM.render(
  <MyComponent/>,
  document.getElementById('root')
);
  • The standard mandatory “root” DOM node (placeholder for React DOM manipulation)
<div id="root"></div>
  • Output:

Advertising
web/javascript/react/function/fetch.txt · Last modified: 2019/06/17 18:02 by gerardnico