Question

我正在尝试让axios响应请求。
网址将是动态的。
反应代码为：

class Players extends React.Component {
  state = {
    players: [],
  };
  componentDidMount() {
    const fetchData = async () => {
      const res = await axios.get(
        "https://nba-players.herokuapp.com/players-stats/Aaron" {*I want to make this name dynamic and grab this name from a form */}
      );
      this.setState({ players: res.data });
    };
    fetchData();
  }
  render() {
    return <div>{this.state.players.team_name}</div>;
  }
}

html格式为：

<form id="form">
  <label for="name">Type name</label>
  <input id="name" type="text" />
  <input type="submit" />
</form>

当用户在输入中键入名称并单击此form中的Submit时，
然后，它将被重定向到react应用，并且axios get请求将为https://nba-players.herokuapp.com/players-stats/ + The name user typed in that form
这样，我就可以根据用户在form中键入的名称在我的react应用程序中获取数据。

这是我的方法：

反应代码：

class Players extends React.Component {
  state = {
    players: [],
  };
  componentDidMount() {
    const fetchData = async () => {
      const res = await axios.get("https://nba-players.herokuapp.com/players-stats/" + window.location.href.split('/')[4]);
      this.setState({ players: res.data });
    };
    fetchData();
  }
  render() {
    return <div>{this.state.players.team_name}</div>;
  }
}

HTML：

<form id="form">
  <label for="name">Type name</label>
  <input id="name" type="text" />
  <input type="submit" />
</form>

jQuery：

$("#form").on("submit", function () {
        $(this).attr(
          "action",
          "http://localhost:3000/" + $("input").val() //react project on port 3000
        );
      });

还有更好的方法吗？

Answer 1

这是一个非常常见的用例。您想要一个连接到表单输入字段的状态。您希望状态代表输入字段的最新更改以及您希望采用该状态并使用它的表单的onSubmit，例如捕获来自REST API的内容。

看看React的官方文档：https://reactjs.org/docs/forms.html

这是一步一步的教程，介绍如何将输入连接到状态。

让我写下最重要的部分：

您在渲染返回jsx中描述的每个输入字段都有一个onChange回调函数供您使用。

<input onChange={myCallbackFunction} />

每次输入字段的值更改时，都会调用此回调函数。

const myCallbackFunction = (event) => {
   // standard web api change event
   const newValue = event.target.value;
   // update state based on input field changes
   this.setState({ playerName: newValue });
}

现在，您已经根据输入字段更新了状态。

最后一步是创建一个onSubmit回调函数，该函数触发axios调用。

<form onSubmit={mySubmitFunction}>

const mySubmitFunction = (event) => {
   // standard web api submit event
   event.preventDefault();
   // use state
   const url = `https://nba-players.herokuapp.com/players-stats/${this.state.playerName}`
  // TODO call axios with dynamic url
}

如何使axios在react.js中动态获取请求？

1 个答案: