React/axios 在渲染前获取数据

Question

我正在开发一个反应应用程序，我正在尝试在渲染之前获取数据。我在 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但我猜我不擅长这个。

Answer 1

既然你提到你需要在渲染之前获取数据，我猜你正在获取数据，但是在渲染之后。在这种情况下，请考虑条件渲染。例如，添加一个将保持加载状态的新状态。最初将其设置为 true。当你取东西时 - 将 loading 设置为 false。根据加载状态（当它为 false 时），您可以呈现所需的一切。

编辑：你在获取时没有更新你的加载状态 - 请删除引号：你有 -this.setState({'load': false}); 试试this.setState({load: false});