Fetch в React.js или как работать с AJAX в реакте
Йоу-йоу! Я тут занялся изучением React’а. И понадобилось мне по ajax запросить данные для своего приложения. Ну и чтобы не мучиться долго с освоением работы с данной технологией в react.js я пошёл в документацию во по этой ссылке. По идее там всё просто, т.к. в примере не использовался обычный fetch, без какого-нибудь axios. Но, как оказалось там есть ошибка. Там так много скобок, что можно стать шепелявым глядя на них). Конечно же ничего не получилось у меня из документации и пришлось разбираться самому. Сейчас я вам расскажу, что и как там.
Среда в которой работал
Иногда случаются проблемы на начале работы с React из-за настройки npm-мов всяких, хочется просто начать работать.
Вот мой package.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
{ "name": "fetch-example", "version": "0.1.0", "private": true, "dependencies": { "autoprefixer": "7.1.6", "babel-core": "6.26.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.2", "babel-preset-react-app": "^3.1.2", "babel-runtime": "6.26.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.7", "dotenv": "4.0.0", "dotenv-expand": "4.2.0", "eslint": "4.10.0", "eslint-config-react-app": "^2.1.0", "eslint-loader": "1.9.0", "eslint-plugin-flowtype": "2.39.1", "eslint-plugin-import": "2.8.0", "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.4.0", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", "promise": "8.0.1", "raf": "3.4.0", "react": "^16.5.2", "react-dev-utils": "^5.0.2", "react-dom": "^16.5.2", "resolve": "1.6.0", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", "webpack": "3.8.1", "webpack-dev-server": "2.11.3", "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js --env=jsdom" }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx,mjs}" ], "setupFiles": [ "<rootDir>/config/polyfills.js" ], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}" ], "testEnvironment": "node", "testURL": "http://localhost", "transform": { "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$" ], "moduleNameMapper": { "^react-native$": "react-native-web" }, "moduleFileExtensions": [ "web.js", "js", "json", "web.jsx", "jsx", "node", "mjs" ] }, "babel": { "presets": [ "react-app" ] }, "eslintConfig": { "extends": "react-app" } } |
Он был создан в октябре 2018 года с реактом версии 16.5.2
Собственно о fetch в react.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React, { Component } from 'react'; class Succes extends Component{ constructor(props){ super(props); this.state = { error: null, isLoaded: false, items: Array } } componentDidMount() { // Fetch тут fetch("http://example.url/page.php") .then((response) => response.json()) .then((response) => { this.setState({items: response}); this.setState({isLoaded: true}); }) .then((error) => { this.setState({false: true}); this.setState({error}); }) } render (){ const data = Array.from(this.state.data.headers); } } export default Succes; |
Есть у нас компонент с конструктором. Там содержится состояние. В состояние есть ошибки, загружено или нет и данные. Для данных я изначально я установил пустой массив, isLoaded false и ошибки null.
Во время componentDidMount я сделал fetch на свой адрес. Ну и в зависимости от ответа устанавливается есть данные или нет и есть ошибка или нет.
В рендере (render, внутри return) я проверял загружено или нет и выводил либо таблицу (у меня в компоненте нужно было) либо выводил ошибки.
|
1 2 3 4 5 6 7 8 |
{ isLoaded ? ( items.map((element, index) => <TableRow key={index} value={element} /> ) ) : (<tr><td>Не загружено</td></tr>) } { error ? (<tr><td>{error}</td></tr>) : (false) } |
Либо вы можете сделать проверку загружены ли данные или нет и отдавать разный return как в примере, который есть в документации реакта.
Полезные ссылки
P.S.
Я и моя команда занимаемся продвижением сайтов в том числе и созданием каталогов. Оптимизацию сайта вы можете заказать у меня на прямую или обратившись в студию, в которой я работаю. А пока вы не обратились к нам пробуйте самостоятельно улучшить свой сайт, подобрать ключевые слова. Когда подберёте слова можете воспользоваться моим сервисом строки, чтобы вам было проще вставить их на сайт. А также вы можете прочитать про то как правильно подобрать ссылки.