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

Question

I am very new with the react.js library. I am trying to make a simple CRUD application.

I have made a file called 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);
        })
}

I have imported this file in crudexample.js and called the method like this:

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

When I open Google dev tools with F12 I can see the github data so that's working fine.

Now I want to bind this data and I did it like this:

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

I get the following error in my google dev tools

'githubdata' is not defined no-undef

Can someone point me in the right direction?

Answer 1

Try the following:

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

Render:

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

---

componentDidMount()

Answer 2

You can write the code as follows :

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

Look at the demo for better clarification.

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

:))

Answer 3

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

this.state.githubdata

Answer 4

尝试这个：

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