Question

当用户单击按钮时，我正在尝试从组件开始API调用。一个URL参数取决于用户在单击按钮之前选择的单词。提取功能在外部功能中。当我单击按钮并调用函数并控制台记录结果时，它显示undefined，这可能是由于函数的异步特性。

如果要将提取响应置于App组件状态，该如何解决？

import { fetchAPI } from '../fetchAPI';

export default class App extends Component {

constructor() {
    super();
    this.toggleButtonState = this.toggleButtonState.bind(this);
    state = { ... }
}

toggleButtonState() {
    let selectedWord = window.getSelection().toString();
    fetchAPI(selectedWord);
    // call the fetchAPI function and put the result into state
}

export function fetchAPI(param) {
    // param is a highlighted word from the user before it clicked the button
    fetch('https://api.com/?param=' + param)
    .then(function(result) {
        return result;
    });
 }

Answer 1

您必须从fetch函数返回fetchAPI请求，并且还想添加一个附加的then并为其提供一个将{{1} }处于result函数中的状态。

在您的示例中，toggleButtonState函数内的then是多余的，因为它仅按原样返回值。您可以删除它，但仍然得到相同的结果。

示例

fetchAPI

function fetch() {
  return new Promise(resolve => setTimeout(() => resolve(42), 1000));
}

function fetchAPI(param) {
  // param is a highlighted word from the user before it clicked the button
  return fetch("https://api.com/?param=" + param);
}

class App extends React.Component {
  state = { result: null };

  toggleButtonState = () => {
    let selectedWord = window.getSelection().toString();
    fetchAPI(selectedWord).then(result => {
      this.setState({ result });
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.toggleButtonState}> Click me </button>
        <div>{this.state.result}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 2

toggleButtonState() {
  let selectedWord = window.getSelection().toString();
  fetchAPI(selectedWord).then(result => this.setState({result});
}

export function fetchAPI(param) {

  // param is a highlighted word from the user before it clicked the button
  return fetch('https://api.com/?param=' + param)
}

这将解决您的问题。如果您不想像这样更改fetch API，只需在调用fetch之前添加“ return”，如下所示。

toggleButtonState() {
  let selectedWord = window.getSelection().toString();
  fetchAPI(selectedWord).then(result => this.setState({result});
}

export function fetchAPI(param) {
  return fetch('https://api.com/?param=' + param)
    .then(function(result){
      return result;
    });
}

Answer 3

一种解决方案是为您的fetchAPI()函数提供回调：

function fetchAPI(param, callback) {
  // param is a highlighted word from the user before it clicked the button
  return fetch("https://api.com/?param=" + param)
    .then(callback);
}

您可以像这样调用修改后的函数：

fetchAPI(selectedWord, result =>
  this.setState({ result });
);

请注意，这遵循与其他答案相同的一般原则。您需要使用正确的setState()参考来调用this。您只能通过组件类内部的函数来执行此操作。

反应-单击按钮即可从外部API函数获取

3 个答案: