小编AJ-*_*AJ-的帖子

GatsbyJS从Restful API获取数据

我是React和GatsbyJS的新手.我很困惑,无法以一种简单的方式从第三方Restful API加载数据.

例如:我想从randomuser.me/API获取数据,然后能够使用页面中的数据.

我们这样说:

  import React from 'react'
  import Link from 'gatsby-link'

  class User extends React.Component {
    constructor(){
      super();
      this.state = {
        pictures:[],
      };

    }

    componentDidMount(){
      fetch('https://randomuser.me/api/?results=500')
      .then(results=>{
        return results.json();
      })
      .then(data=>{
        let pictures = data.results.map((pic,i)=>{
            return(
              <div key={i} >
                <img key={i} src={pic.picture.medium}/>
              </div>
            )
        })
        this.setState({pictures:pictures})
      })
    }

    render() {
      return (<div>{this.state.pictures}</div>)
    }
  }

  export default User;
Run Code Online (Sandbox Code Playgroud)

但我想得到GraphQL的帮助,以便对用户等进行过滤和排序......

您能否帮我找一下如何获取数据并将其插入GraphQL的示例 gatsby-node.js

gatsby

32
推荐指数
3
解决办法
2万
查看次数

使用 pyenv 设置默认 python

我尝试通过安装 PYENV 和 PYPIP 在我的 macOS Catalina 10.15.1 上升级我的 Python 版本,并将全局和本地设置为版本 3.8.0。但是当我尝试使用 python 版本时,它仍然显示内置在 MacOS 操作系统中的 python 版本。缺少哪一部分?

$ pyenv -v
pyenv 1.2.14

$ pypip -v
zsh: command not found: pypip

$ pyenv versions
  system
* 3.8.0 (set by /Users/aj/.python-version)

$ pyenv global
3.8.0

$ pyenv local
3.8.0

$ python -V
Python 2.7.16
Run Code Online (Sandbox Code Playgroud)

python pyenv macos-catalina

10
推荐指数
4
解决办法
9575
查看次数

动态地将 React 组件添加到 DIV 或另一个 React App 中

语境

我正在尝试根据事件 fg onClick 事件将 React 组件动态添加到 DIV/另一个 React 组件中。

我尝试过,知道我可以通过 JS 将任何 HTML 元素添加到 DIV 中,只需通过 createElement 并将其附加到 DIV 中即可。但我想将react组件添加到DIV中。

问题:

当我将 React 组件附加到 DIV 中时,它将添加 [object Object],我正在寻找一种能够渲染 React 组件并将其插入到 DIV 中的方法。

这是 codeSandBox :https://codesandbox.io/s/frosty-bouman-f95mx?file =/src/App.js

    import React from "react";
    import "./styles.css";
    import Button from "./Button";

    const addToCanvos = () => {
      var canvos = document.querySelector(".canvos");
      canvos.append(<Button />);
    };

    export default function App() {
      return (
        <div className="App">
          <Button event={addToCanvos} />
          <div className="canvos" />
        </div>
      );
    }
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

3
推荐指数
1
解决办法
9202
查看次数

标签 统计

gatsby ×1

javascript ×1

macos-catalina ×1

pyenv ×1

python ×1

reactjs ×1