Question

我终于想出了如何从API中获取数据的方法：），但现在我陷入了困境，因为我试图更改获取请求的网址。

我无法弄清楚如何在URL中使用我的输入，因为它会出现一个错误，提示未定义输入。我假设的原因是，从技术上讲，它没有链接。我是否忽略了一些非常简单的事情？

还有一点背景；我正在尝试构建一个简单的字典Web应用程序，您在其中键入单词并检索定义。我目前正在为我的项目使用WordAPI API。

import React from "react";
import "./App.css";
import ZipForm from "./ZipForm.js";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: null,
      isLoaded: false,
      input: "",
    };

    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onFormSubmit(input) {
    this.setState({ input });

  }

  componentDidMount() {
    const url = `https://wordsapiv1.p.rapidapi.com/words/${input}/definitions`
    fetch(url, {
      method: "GET",
      headers: {
        "x-rapidapi-host": "wordsapiv1.p.rapidapi.com",
        "x-rapidapi-key": "58143f60a0msh9b238a4cf58ba29p1e28e0jsn9e523b0104ba",
      },
    })
      .then((response) => response.json())
      .then((json) => {
        this.setState({
          items: json,
          isLoaded: true,
        });
        console.log(json.definitions[0].definition);
      });
  }

  render() {
    var { isLoaded, items } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
    }
    return (
      <div>
        <h1 className="tc">{items.definitions[0].definition}</h1>
        <ZipForm onSubmit={this.onFormSubmit} />
      </div>
    );
  }
}

如何在React中自定义抓取网址？

0 个答案: