React/axios 在渲染前获取数据
我正在开发一个反应应用程序，我正在尝试在渲染之前获取数据。我在 NET 上尝试了很多可用的解决方案，但似乎没有任何效果。我正在尝试从我的 nodeJS 服务器获取数据（服务文件夹中的文件，以便我可以管理它们、添加它们等）
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.');
});
};
我尝试调用道具，使用componentWillMountandComponentDidMount但我猜我不擅长这个。
牛魔王的故事1回答
-
交互式爱情
既然你提到你需要在渲染之前获取数据，我猜你正在获取数据，但是在渲染之后。在这种情况下，请考虑条件渲染。例如，添加一个将保持加载状态的新状态。最初将其设置为 true。当你取东西时 - 将 loading 设置为 false。根据加载状态（当它为 false 时），您可以呈现所需的一切。编辑：你在获取时没有更新你的加载状态 - 请删除引号：你有 -this.setState({'load': false}); 试试this.setState({load: false});
随时随地看视频慕课网APP
相关分类
JavaScript