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

Question

我在一次采访中得到了以下任务，这里的任务是使用按钮单击时的 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;

MyButton.js

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;

MyPage.js

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;

MyAPI.js

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 数据包含示例用户的名称，仅用于演示目的，例如:John Doe。我需要根据给定的任务在我的页面上仅显示 John。

当我运行此应用程序时，我的 MyButton.js 和 MyPage.js 日志中出现错误。

在MyButton.js中，错误位于onClick={this.props.onClickButton}行，它表示无法访问未定义的 Prop 。如果我将其更改为 onClick={this.onClickButton}，则会出现错误，无法访问未定义的 onClickButton。在这里执行此操作的正确方法是什么，请帮忙。

同样适用于 MyPage.js 行 {this.props.apiResponse.split("")[0]，这也是正确的使用方法这里的 split 方法从 John Doe 获取名字？

Answer 1

您的MyButtn和MyPage都是功能组件。要访问 props，您不需要使用 this。对于功能组件，props 被视为参数。

我的按钮

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

我的页面

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