ReferenceError: talk is not defined

C30935608bc34b1c854293de06c13c89?s=47 Hugo
September 06, 2019

ReferenceError: talk is not defined

Errar é humano. Mas o que fazer para evitar erros nos nossos apps React? Algumas boas práticas podem fazer toda a diferença para a experiência do usuário.

C30935608bc34b1c854293de06c13c89?s=128

Hugo

September 06, 2019
Tweet

Transcript

  1. 4.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  2. 5.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  3. 6.
  4. 16.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  5. 17.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  6. 18.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  7. 19.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  8. 20.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  9. 21.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  10. 22.

    async function render(user) { let data = await getData(user); let

    pageData = getPage(10, 1, data); return renderPage(pageData); }
  11. 25.

    async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }
  12. 26.

    async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }
  13. 27.

    function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  14. 28.

    async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }
  15. 29.

    async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }
  16. 30.

    async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }
  17. 31.

    async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }
  18. 36.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  19. 37.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  20. 38.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  21. 39.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  22. 40.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  23. 41.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  24. 42.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  25. 43.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  26. 44.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  27. 45.
  28. 46.
  29. 47.
  30. 48.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  31. 49.
  32. 50.
  33. 51.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  34. 52.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search Unavailable
  35. 53.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  36. 54.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800
  37. 55.

    class RocketDetails extends Component { render() { let { title,

    info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt> <dd>{info[0].value}</dd> <dt>{info[1].label}</dt> <dd>{info[1].value}</dd> </dl> </article> ); } }
  38. 56.

    class RocketDetails extends Component { static getDerivedStateFromError(error) { return {

    error: true }; } render() { let { title, info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt> <dd>{info[0].value}</dd> <dt>{info[1].label}</dt> <dd>{info[1].value}</dd> </dl> </article>
  39. 58.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search Unavailable
  40. 59.

    class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );
  41. 60.

    class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );
  42. 61.

    class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );
  43. 62.

    class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );
  44. 63.

    (e) => this.setState({ value: e.target.value }) } /> </form> );

    } handleSubmit = (e) => { e.preventDefault(); performSearch({ query: this.state.value }); }; }
  45. 64.

    (e) => this.setState({ value: e.target.value }) } /> </form> );

    } handleSubmit = (e) => { e.preventDefault(); performSearch({ query: this.state.value }); }; }
  46. 65.

    (e) => this.setState({ value: e.target.value }) } /> </form> );

    } handleSubmit = (e) => { e.preventDefault(); performSearch({ query: this.state.value }); }; }
  47. 67.
  48. 69.

    handleSubmit = (e) => { e.preventDefault(); try { performSearch({ query:

    this.state.value }); } catch (e) { this.setState({ error: true }); } };
  49. 71.
  50. 72.
  51. 73.
  52. 76.
  53. 78.
  54. 80.
  55. 81.
  56. 82.

    class RocketDetails extends Component { static getDerivedStateFromError(error) { return {

    error: true }; } render() { let { title, info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt> <dd>{info[0].value}</dd> <dt>{info[1].label}</dt> <dd>{info[1].value}</dd> </dl> </article>
  57. 83.

    class RocketDetails extends Component { static getDerivedStateFromError(error) { return {

    error: true }; } componentDidCatch(error, info) { console.error(error, info); Sentry.captureException(err); } render() { let { title, info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt>
  58. 84.
  59. 88.

    Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search Unavailable
  60. 89.
  61. 90.

    static getDerivedStateFromError(error) { return { error: true }; } componentDidCatch(error,

    info) { console.error(error, info); Sentry.captureException(err); }
  62. 92.
  63. 93.