Reactjs：使用助手类和函数从API获取数据

Question

我是Reactjs的初学者，并试图通过一个项目来提高自己。随着项目的进行，我现在需要设置一个结构，以便我的UI组件连接到某个RESTAPI，并使用返回的数据。这在互联网上有很多例子，很好。

我的问题是，我是否以及如何将应用编程接口连接与实际的用户界面组件分开。我相信这可能是好的，因为我将有机会在各种用户界面组件中重用应用编程接口连接功能。（在这些帮助器方法中执行与API连接相关的常见任务是理想的。）

为此，我创建了一个PrimaryForm.js文件，即UI组件。对于API调用，我创建了一个APIManager.js文件。理想情况下，APIManager不应该有任何jsx，而只有返回API调用结果到PrimaryF的函数orm.js.

我正在分享我迄今为止编写的代码，以实现这一点。

PrimaryForm.js，删除对APIManager.js的API调用（请参阅下面的HandleTestConnection部分）：

import React from 'react';
import withStyles from '@material-ui/styles/withStyles';
import {Link, withRouter } from 'react-router-dom';
import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import Select from '@material-ui/core/Select';
import FormHelperText from '@material-ui/core/FormHelperText';
import PrimaryFormValidator from '../../validators/PrimaryFormValidator'
import styles from '../../Styles';

import Grid from '@material-ui/core/Grid';
import Tooltip from '@material-ui/core/Tooltip';
import CancelIcon from '@material-ui/icons/Cancel';
import BackIcon from '@material-ui/icons/ArrowBackIosRounded';
import TestIcon from '@material-ui/icons/Power';
import ForwardIcon from '@material-ui/icons/ArrowForwardIosRounded';
import Button from '@material-ui/core/Button';
import APIManager from '../../managers/APIManager';

function PrimaryForm(props) {
  const { classes } = props;
  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {setLabelWidth(inputLabel.current.offsetWidth);}, []);

  const [state, setState] = React.useState({
    hostname: {
      value: "test",
      isError: false,
      errorText: "",
    },
    serverIp: {
      value: "192.168.16.1",
      isError: false,
      errorText: "",
    },
    osVariant: {
      value: "Linux",
      isError: false,
      errorText: "",
    },
    databaseSid: {
      value: "mysql",
      isError: false,
      errorText: "",
    },
    listenerPort: {
      value: "3306",
      isError: false,
      errorText: "",
    },
    isFormValid: true,
    isPrimaryDbValid: false,
  });

  const evaluateFormValid = (prevState) => {
    return ((prevState.hostname.value!=="" && !prevState.hostname.isError) &&
            (prevState.serverIp.value!=="" && !prevState.serverIp.isError) &&
            (prevState.osVariant.value!=="" && !prevState.osVariant.isError) &&
            (prevState.databaseSid.value!=="" && !prevState.databaseSid.isError) &&
            (prevState.listenerPort.value!=="" && !prevState.listenerPort.isError));
  };

  const handleChange = event => {
    var valResult;
    switch (event.target.id) {
      case 'hostname':
        valResult = PrimaryFormValidator.validateHostname(event.target.value, event.target.labels[0].textContent);
        setState({
          ...state,
          hostname:
          {
            value: event.target.value,
            isError: valResult.isError,
            errorText: valResult.errorText,
          },
        });
        break;
      case 'serverIp':
        valResult = PrimaryFormValidator.validateIpAddress(event.target.value, event.target.labels[0].textContent);
        setState({
          ...state,
          serverIp:
          {
            value: event.target.value,
            isError: valResult.isError,
            errorText: valResult.errorText,
          }
        });
        break;
      case 'databaseSid':
        valResult = PrimaryFormValidator.validateDatabaseSid(event.target.value, event.target.labels[0].textContent);
        setState({
          ...state,
          databaseSid:
          {
            value: event.target.value,
            isError: valResult.isError,
            errorText: valResult.errorText,
          }
        });
        break;
      case 'listenerPort':
        valResult = PrimaryFormValidator.validateListenerPort(event.target.value, event.target.labels[0].textContent);
        setState({
          ...state,
          listenerPort:
          {
            value: event.target.value,
            isError: valResult.isError,
            errorText: valResult.errorText,
          }
        });
        break;
      default:
        //setState({...state,});
    }
    setState(prevState => ({
      ...prevState,
      isFormValid: evaluateFormValid(prevState),
    }));
  }

  const handleTestConnection = event => {
    APIManager.testConnection(state.hostname.value, state.serverIp.value, state.osVariant.value, state.databaseSid.value, state.listenerPort.value);
    //console.log("Data:" + APIManager.state.testConnectionResult);
  }

  const handleSelect = osVariant => event => {
    var valResult = PrimaryFormValidator.validateOsVariant(event.target.value, inputLabel.current.textContent);
    setState(prevState => ({
      ...prevState,
      osVariant:
      {
        value: event.target.value,
        isError: valResult.isError,
        errorText: valResult.errorText,
      },
    }));
    setState(prevState => ({
      ...prevState,
      isFormValid: evaluateFormValid(prevState),
  }));
  }

  return (
    <React.Fragment>
      <div className={classes.bigContainer}>
        <Paper className={classes.paper}>
          <div>
            <div>
              <Typography variant="subtitle1" gutterBottom className={classes.subtitle1} color='secondary'>
                Primary Database System
              </Typography>
              <Typography variant="body1" gutterBottom>
                Information related with the primary database system. Please note that the primary database has to be up and running.
              </Typography>
            </div>
            <div className={classes.bigContainer}>
              <form className={classes.formArea}>
                <TextField className={classes.formControl}
                  id="hostname"
                  label="FQDN Hostname *"
                  onChange={handleChange}
                  value={state.hostname.value}
                  error={state.hostname.isError}
                  helperText={state.hostname.errorText}
                  variant="outlined" autoComplete="off" />
                <TextField className={classes.formControl}
                  id="serverIp"
                  label="Server Ip Address *"
                  onChange={handleChange}
                  value={state.serverIp.value}
                  error={state.serverIp.isError}
                  helperText={state.serverIp.errorText}
                  variant="outlined" autoComplete="off" />
                <FormControl variant="outlined" className={classes.formControl}>
                  <InputLabel id="osVarLabel" htmlFor="osVariant" ref={inputLabel}>OS Variant *</InputLabel>
                  <Select
                    id="osVariant"
                    label="OS Variant *"
                    value={state.osVariant.value}
                    error={state.osVariant.isError}
                    onChange={handleSelect("osVariant")}
                    input={<OutlinedInput id="outlinedinput" labelWidth={labelWidth}/>}>
                    <MenuItem value={''}></MenuItem>
                    <MenuItem value={'Linux'}>Linux</MenuItem>
                    <MenuItem value={'Windows'}>Windows</MenuItem>
                  </Select>
                  <FormHelperText error={state.osVariant.isError} hidden={!state.osVariant.isError}>
                    {state.osVariant.errorText}
                  </FormHelperText>
                </FormControl>
                <TextField className={classes.formControl}
                  id="databaseSid"
                  label="Database SID"
                  onChange={handleChange}
                  value={state.databaseSid.value}
                  error={state.databaseSid.isError}
                  helperText={state.databaseSid.errorText}
                  variant="outlined" autoComplete="off" />
                <TextField className={classes.formControl}
                  id="listenerPort"
                  label="Listener Port"
                  onChange={handleChange}
                  value={state.listenerPort.value}
                  error={state.listenerPort.isError}
                  helperText={state.listenerPort.errorText}
                  variant="outlined" autoComplete="off" />
                {/* <TextField className={classes.formControl}
                  disabled={true}
                  id="isFormValid"
                  label="Is Form Valid Now?"
                  value={state.isFormValid}
                  variant="outlined" autoComplete="off" /> */}
              </form>
            </div>
          </div>      
        </Paper>
        <Grid container spacing={2} className={classes.grid}>
              <Grid item xs={12}>
                <div className={classes.flexBar}>
                  <Tooltip title="Back to previous step">
                    <div>
                      <Button variant="contained"
                        disabled={true}
                        className={classes.actionButton}
                        size='large'>
                        <BackIcon className={classes.rightIcon}/>Back
                      </Button>
                    </div>
                  </Tooltip>

                  <Tooltip title="Test Connection">
                    <div>
                      <Button variant="contained" className={classes.actionButton}
                        color="primary"
                        size='large'
                        disabled={!state.isFormValid}
                        onClick={handleTestConnection}>
                        <TestIcon className={classes.rightIcon}/>Test
                      </Button>
                    </div>
                  </Tooltip>

                  <Tooltip title="Proceed the next step">
                    <div>
                      <Button
                        variant="contained" className={classes.actionButton}
                        color="primary"
                        size='large'
                        disabled={!state.isPrimaryDbValid}>
                        <ForwardIcon className={classes.rightIcon} />Next
                      </Button>
                    </div>
                  </Tooltip>

                  <Tooltip title="Cancel creating new configuration">
                    <Button variant="contained" color="default" className={classes.actionButton}
                      component={Link} to={'/configs'} style={{ marginLeft: 'auto' }}>
                      <CancelIcon className={classes.rightIcon} />Cancel
                      </Button>
                  </Tooltip>
                </div>
              </Grid>
            </Grid>
      </div>
    </React.Fragment>
  )
}

export default withRouter(withStyles(styles)(PrimaryForm));

这是我的经理。js文件：

import React, { Component } from 'react';

export default class APIManager extends Component{
    constructor(props) {
      super(props); 
      this.state = {
        testConnectionResult: {},
        ...this.props,
      }
      this.testConnection = this.testConnection.bind(this);
    }

    static testConnection(hostname, serverIp, osVariant, databaseSid, listenerPort) {
      fetch(`http://localhost:8000/api?objtype=ConnectionDef&hostname=${hostname}&serverIp=${serverIp}&osVariant=${osVariant}&databaseSid=${databaseSid}&listenerPort=${listenerPort}`)
       .then(response => response.json())
       .then(result => this.setState({testConnectionResult: result}));
        //.catch((error) => console.error(error));
       console.log("Data:" + this.testConnectionResult);

      return this.testConnectionResult;
    }
}

现在我无法解决下面的错误：

经理。js:16未捕获（promise中）类型错误：_this2。setState不是APIManager的函数。js:16

我想我现在很难将API调用的结果传递给外部（被调用方）类/函数。

我谷歌了一下，还检查了Stackoverflow上的其他问题，但这并没有帮助我解决这个问题。我还想问我是否犯了一个主要错误。

任何帮助都将不胜感激。谢谢。

Answer 1

您不必仅仅为了保存API调用逻辑而创建组件。in-react组件用于声明可视内容（因此它们将具有jsx）。

若要从组件中提取api调用逻辑，可以将该逻辑放入某个返回promise的函数中。像这样：

function testApi(...args) {
  return fetch(/* url parms */)
}

然后在你的组件中，在某个事件中，比如单击，你可以调用应用编程接口，并将响应数据设置为组件状态以更改视图：

handleTestEvent(...args) {
  testApi(...args)
    .then(response => response.json())
    .then(result => this.setState({testConnectionResult: result}));
    .catch((error) => {
      console.error(error));
      this.setState({testConnectionResult: []});
    });
}

Answer 2

您不能从静态方法访问此（实例上下文）。让它成为一个常规的实例方法，它应该可以工作。