使用 React.js 将数据绑定到前端答案

【问题标题】：Binding data to front-end with React.js使用 React.js 将数据绑定到前端
【发布时间】：2019-06-18 15:49:04
【问题描述】：

我对 react.js 库非常陌生。我正在尝试制作一个简单的 CRUD 应用程序。

我制作了一个名为dataprovider.js的文件

export function getCrudData() {
    axios.get('https://api.github.com/users/fearcoder')
        .then(response => {
            this.setState({ githubdata: response.data });
        })
        .catch(function (error) {
            console.log(error);
        })
}

我已经在crudexample.js 中导入了这个文件并调用了这样的方法：

constructor(props) {
        super(props);
        dataprovider.getCrudData();
    }

当我用 F12 打开 Google 开发工具时，我可以看到 github 数据，所以一切正常。

现在我想绑定这些数据，我这样做了：

  <td>{githubdata.bio}</td>

我在我的谷歌开发工具中收到以下错误

'githubdata' 未定义 no-undef

有人能指出我正确的方向吗？

【问题讨论】：

您的服务应该不调用 setState，您已经将它耦合到组件。
不是为了劝阻你或任何事情，但我建议你阅读ReactJS documentation 并先从简单的事情开始。尤其是 ReactJS 生命周期，理解起来很重要。祝你好运！

标签： javascript html node.js reactjs api

【解决方案1】：

您可以编写如下代码：

dataProvider.js

export function getCrudData() {
  return axios
    .get("https://api.github.com/users/fearcoder")
    .then(response => {
      return response;
    })
    .catch(function(error) {
      console.log(error);
    });
}

crudeExample.js

constructor(props) {
    super(props);
    this.state = {
      githubdata: ""
    };
  }
  componentWillMount() {
    getCrudData().then(res => {
      console.log(res);
      this.setState({ githubdata: res.data });
    });
  }
  render() {
    const { githubdata } = this.state;
    return (
      <>
        <div>{githubdata.url}</div>
      </>
    );
  }

查看演示以获得更好的说明。

https://codesandbox.io/embed/upbeat-leftpad-isrm5

:))

【讨论】：

乐于助人。 ;))
你也应该importdataProvider.js in roughExample.js
它正在被导入。您可以查看代码和框的链接以进行澄清。

【解决方案2】：

尝试以下方法：

constructor() {
    super(props);
    this.state = {
        githubdata: "" // Define githubdata.
    }
}

componentDidMount() {
    axios.get('https://api.github.com/users/fearcoder')
        .then(response => {
            this.setState({ githubdata: response.data });
        })
        .catch(function (error) {
            console.log(error);
        })
}

渲染：

<td>{this.state.githubdata.bio}</td>

componentDidMount()

【讨论】：

嗨，Daan，感谢您抽出宝贵时间！您的解决方案正在运行，但我希望我的 HTTP 请求位于单独的文件中。像这样的东西：componentDidMount() { this.dataprovider.getCrudData(); }
你可以把它放在一个单独的文件中，然后import它。你也可以把它作为一个函数放在你的组件中。我通常只使用componentDidMount() 来异步获取（初始）数据，所以我更喜欢把它全部保存在里面。

【解决方案3】：

githubdata是在state中定义的，所以用它来访问githubdata：

this.state.githubdata

【讨论】：

感谢您的宝贵时间！我收到以下错误 TypeError: Cannot read property 'githubdata' of null –
这是因为组件states还没有初始化。为什么不把这个dataprovider.getCrudData() 放在生命周期方法componentDidMount 中，因为这是发出请求的最佳位置。
你的意思是这样的？ componentDidMount() { this.dataprovider.getCrudData(); }

【解决方案4】：

试试这个：

<td>{this.state.githubdata.bio}</td>

【讨论】：

感谢您的宝贵时间！我收到以下错误 TypeError: Cannot read property 'githubdata' of null
你能给我看看 githubdata 吗？也许它是空的。
在浏览器中通过以下链接：api.github.com/users/fearcoder 我现在也收到 TypeError 错误：_this.setState is not a function
您需要将该 API 的数据分配给组件的状态，然后您就可以访问它，希望这会对您有所帮助。