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}行，它表示无法访问未定义的props。如果将其更改为onClick={this.onClickButton}，则会收到错误消息，因为无法访问未定义的onClickButton。在这里执行此操作的正确方法是什么，请帮忙。

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

Answer 1

您的 MyButtn 和 MyPage 都是功能组件。要访问props，您无需使用this。在功能组件的情况下，道具被视为参数。

我的按钮

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

Answer 2

一旦成功将响应保存到变量

a = jhon doe;

data = a.split（“”）;

数据[0];

您可以在父组件中执行此操作。

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

2 个答案: