Javascript 从其他组件中的服务访问数据

在一次采访中，我得到了下面的任务，这里的任务是使用ajax调用按钮点击从API获取响应，并将其显示在页面上

我在App.js中有一个顶级组件，有两个子组件MyButton.js和MyPage.js，服务代码在MyAPI.js中

文件内容如下：

App.js

import React, { Component } from 'react';
import MyAPI from './services/MyAPI';
import MyButton from './components/MyButton';
import MyPage from './components/MyPage';

class App extends Component {
  constructor() {
    super();
    this.state= {
      'apiResponse': ''
    };
  }

  handleButtonClick = () => {
    MyAPI.getAPIResponse().then((res) => {
        res => this.setState({ apiResponse })
    });
  }



  render() {
    return (
      <div>
        <center><MyButton onClickButton={this.handleButtonClick}></MyButton></center>
        <MyPage apiResponse={this.props.apiResponse}></MyPage>
      </div>
    );
  }


}

export default App;

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';

const MyButton = (() => (
  <div className="button-container">
    <MyButton variant="extendedFab" color="primary"
      onClick={this.props.onClickButton}>
      Call API
    </MyButton>
  </div>
));


MyButton.propTypes = {
    onClickButton: PropTypes.func
}

export default MyButton;

import React from 'react';
import PropTypes from 'prop-types';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Paper from '@material-ui/core/Paper';

const MyPage = (() => (
  <Paper className="container">
      <List>
          <ListItem>
          <ListItemText>Name: {this.props.apiResponse.split(" ")[0]}</ListItemText>
      </ListItem>
      </List>
  </Paper>
));

MyPage.propTypes = {
  apiResponse: PropTypes.string
}

export default MyPage;

import axios from 'axios';

export default {
    getAPIResponse() {
        return axios.get("--url to get user name and age as json--").then(response => {
            return response.data;
        });
    }
};

这里的JSON数据包含一个示例用户的名称，仅用于演示目的，例如：

johndoe

。根据给定的任务，我只需要在我的页面上显示

John

当我运行这个应用程序时，我在日志中的

MyButton.js

和

MyPage.js

中发现了错误

在

MyButton.js

中，错误出现在第

onClick={this.props.onClickButton}

行，它表示无法访问未定义的属性。如果我将其更改为

onClick={this.onClickButton}

，我会得到一个错误，因为无法访问未定义的上的onClickButton。这里的正确方法是什么，请帮助

---

这同样适用于

{this.props.apiResponse.split（“”[0]行的
MyPage.js

，在这里使用拆分方法从

John Doe

获取名字是否正确？

你的MyButton和MyPage都是功能组件。要访问

道具，你不需要使用
这个
。如果是功能组件，道具将被视为参数

MyButton

const MyButton = ((props) => (
  <div className="button-container">
    <MyButton variant="extendedFab" color="primary"
      onClick={props.onClickButton}>
      Call API
    </MyButton>
  </div>
));

constmybutton=（（道具）=>(
调用API
));

MyPage

const MyPage = ((props) => (
  <Paper className="container">
      <List>
          <ListItem>
          <ListItemText>Name: {props.apiResponse.split(" ")[0]}</ListItemText>
      </ListItem>
      </List>
  </Paper>
));

constmypage=（（道具）=>(
名称：{props.apiResponse.split（“”[0]}
));
您的MyButtn和MyPage都是功能组件。要访问
道具
，您不需要使用
此
。如果是功能组件，道具将作为参数

MyButton

const MyButton = ((props) => (
  <div className="button-container">
    <MyButton variant="extendedFab" color="primary"
      onClick={props.onClickButton}>
      Call API
    </MyButton>
  </div>
));

constmybutton=（（道具）=>(
调用API
));

MyPage

const MyPage = ((props) => (
  <Paper className="container">
      <List>
          <ListItem>
          <ListItemText>Name: {props.apiResponse.split(" ")[0]}</ListItemText>
      </ListItem>
      </List>
  </Paper>
));

constmypage=（（道具）=>(
名称：{props.apiResponse.split（“”[0]}
));
一旦响应成功，就必须将其存储在变量中

var a=“jhon doe”；
var数据=a.分割（“”）；
数据[0]；

您可以在父组件中执行此操作。
一旦响应成功，您必须将其存储在变量中

var a=“jhon doe”；
var数据=a.分割（“”）；
数据[0]；

您可以在父组件中执行此操作。
谢谢，我将尝试此操作谢谢，我将尝试此操作