javascript - 无法使用 react-starter-kit 重新渲染组件

标签 javascript reactjs react-starter-kit

使用 kriasoft/react-starter-kit创建一个网络应用程序。 它从我的 api 服务器获取对象,并将它们显示在页面上。 应用在获取数据时应显示加载图标。

我的代码在获取对象后没有重新渲染组件。 它继续显示“正在加载...”,即使我想看到“数据已加载!”。

import React from 'react';
import fetch from 'isomorphic-fetch'

class Search extends React.Component {
  constructor(...args) {
    super(...args);

    this.getObjectsFromApiAsync = this.getObjectsFromApiAsync.bind(this);

    this.state = {
      isLoading: true,
    };
  }
  
  async getObjectsFromApiAsync() {
    try {
      const response = await fetch('http://localhost:3030/api');
      const content = await response.json();
      // console.log(content)
      this.setState({isLoading: false});
    } catch(e) {
      console.error(e);
    }
  }

  componentWillMount() {
    this.getObjectsFromApiAsync();
  };
  
  render() {
    if (this.state.isLoading) {
      return (
        <p>Loading...</p>
      );
    }
    
    return (
      <p>Data loaded!!</p>
    );
  }
}

最佳答案

通过将 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 添加到我的 api 服务器解决了这个问题。 问题不在 React 中。

这是解决方案资源: https://stackoverflow.com/a/18311469/6209648

关于javascript - 无法使用 react-starter-kit 重新渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48224124/

相关文章:

javascript - 重新渲染后如何保存组件状态? react js

reactjs - React Starter Kit 错误 - 找不到页面

javascript - select2 - 如何使用 jQuery 将值更改为列表的第一个选项?

javascript - Highcharts X 轴标签为文本

javascript - 如何在 React Redux 中渲染 JSON 数据数组

reactjs - React History.push 允许用户在新选项卡中打开

javascript - React Starter Kit 中的 Ajax 调用

javascript - 根据属性值选择元素

javascript - 我可以使用标准 JavaScript 函数创建 XMLHttpRequest 吗?