更新 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.&nbsp;从路径名字符串中删除正斜杠并将路径名设置为状态中的设备名。state=&nbsp;{ &nbsp;devicename:&nbsp;removeForwardSlash(window.location.pathname) }removeForwardSlash只是实现删除正斜杠或解析路径名的功能，但最适合您。使用 componentDidMount 检查状态中是否存在设备名称，然后使用this.state.devicename