我正在開(kāi)發(fā)一個(gè)反應(yīng)應(yīng)用程序,我正在嘗試在渲染之前獲取數(shù)據(jù)。我在 NET 上嘗試了很多可用的解決方案,但似乎沒(méi)有任何效果。我正在嘗試從我的 nodeJS 服務(wù)器獲取數(shù)據(jù)(服務(wù)文件夾中的文件,以便我可以管理它們、添加它們等)import React, {Component} from 'react';import Checkbox from './Checkbox';import axios from 'axios';const OPTIONS = [];console.log('dd');class App extends Component { state = { checkboxes: OPTIONS.reduce( (options, option) => ({ ...options, [option]: false, }), {} ), load: true, }; componentWillMount() { this.callF(); this.setState({load: false}); } selectAllCheckboxes = (isSelected) => { Object.keys(this.state.checkboxes).forEach((checkbox) => { this.setState((prevState) => ({ checkboxes: { ...prevState.checkboxes, [checkbox]: isSelected, }, })); }); }; callF = () => { console.log('Yes'); axios .get('http://localhost:3007/service') .then(function (response) { response.data.forEach((element) => { if (OPTIONS.indexOf(element) === -1 && element !== 'Master.js' && element !== 'command.txt') { OPTIONS.push(element); } }); console.log('----' + OPTIONS); }) .catch(function (error) { console.log('{' + error + '}'); }); }; selectAll = () => { this.selectAllCheckboxes(true); console.log('HEY'); }; deselectAll = () => this.selectAllCheckboxes(false); handleCheckboxChange = (changeEvent) => { const {name} = changeEvent.target; this.setState((prevState) => ({ checkboxes: { ...prevState.checkboxes, [name]: !prevState.checkboxes[name], }, })); }; handleFormSubmit = (formSubmitEvent) => { formSubmitEvent.preventDefault(); Object.keys(this.state.checkboxes) .filter((checkbox) => this.state.checkboxes[checkbox]) .forEach((checkbox) => { console.log(checkbox, 'is selected.'); }); };我嘗試調(diào)用道具,使用componentWillMountandComponentDidMount但我猜我不擅長(zhǎng)這個(gè)。
React/axios 在渲染前獲取數(shù)據(jù)
牛魔王的故事
2023-03-10 16:43:57