Question

我对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>

我的Google开发工具出现以下错误

'githubdata'未定义为no-undef

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

Answer 1

尝试以下操作：

Jun  8 19:17:52 icmp-73260f user.info SM: SM- Security log event: Playout::CPLEnd

Jun  8 19:17:52 icmp-73260f user.info SM: SM- Security log event: Playout::PlayoutComplete

Jun  8 19:17:52 icmp-73260f user.debug SM: IMB Event- End of track CRC values: ffbbffbb - 00c7ffbb - 54c783e4 - 00e483e4

Jun  8 19:17:52 icmp-73260f user.debug SM: IMB Controller- Notify STOPPED state for frame 28465

渲染：

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);
        })
}

componentDidMount()

Answer 2

您可以编写如下代码：

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

：））

Answer 3

githubdata是在state中定义的，因此使用它来访问githubdata：

this.state.githubdata

Answer 4

尝试一下：

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

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

4 个答案: