更新 url 并保存 axios 响应

Question

我有我的代码来接受来自用户的输入（设备名称），一旦我点击 View ，我就会向服务发送一个 axios 请求并从它那里得到响应并使用该响应，我展示了该设备名称的设计。此功能工作正常。 <input type="text" id="devicename" onChange={this.onInputChange.bind(this)}><br> /> <Button text='View' variant='primary' type='submit' onClick={this.onDeviceNameEntered} />单击“查看”按钮时，将调用 onDeviceNameEntered，我将在此处发送onDeviceNameEntered = async () => {    this.setState({ enteredDeviceName: true });    const DeviceName = this.state.devicename;    // an axios post request is built by calling buildRequestToGetData(DeviceName)     const responsedata = await axios.request(buildRequestToGetData(DeviceName)).then((response) =>      (response.data),    ).catch((error) => {      if (error.response && error.response.data) {        this.setState({ error: true });      }    }    );  //code to display the data in responsedata  };如果我需要在获取输入设备名称的 axios 响应后将 url 从当前 url: https://www.example.com/更改 为 https://www.example.com/DeviceName ，这样当我共享与其他人的 url，他将能够看到特定设备的响应数据，而无需键入设备名称并再次单击提交按钮。即如果我需要更新我的 url 并需要在获得响应后共享 url。是否有任何功能可以帮助我在 Javascript 中做到这一点？

Answer 1

您可以使用检查 url 的路径名window.location.pathname。

在您的示例中，将返回/DeviceName. 从路径名字符串中删除正斜杠并将路径名设置为状态中的设备名。

state= {
 devicename: removeForwardSlash(window.location.pathname)
}

removeForwardSlash只是实现删除正斜杠或解析路径名的功能，但最适合您。

使用 componentDidMount 检查状态中是否存在设备名称，然后使用this.state.devicename