ReactJS开发短链工具点击两次提交按钮才显示短链问题求助

问题根因 #

• 异步操作执行顺序错误：axios.post、axios.get都是异步网络请求，当前代码没有等待post请求完成就直接发起get请求，首次提交时get请求会先于短链生成完成返回，拿不到刚生成的短链数据
• 状态更新时机错误：过滤urls获取短链的逻辑写在axios.get的回调外部，get请求还没返回更新state.urls就执行了过滤逻辑，只能拿到过滤空数组的结果
• setState本身是异步操作，调用后不能立即拿到更新后的state值

修复后代码 #

import './App.css';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import React, {Component} from 'react';
import axios from 'axios'

class App extends Component {
  constructor(){
    super()
    this.changelongUrl=this.changelongUrl.bind(this)
    this.onSubmit=this.onSubmit.bind(this)
    this.state={
      longUrl:'',
      shortenedUrl :'',
      urls:[]
    }
  }
  changelongUrl(event){
    this.setState({
      longUrl : event.target.value 
    })
  }
  async onSubmit(event){
    event.preventDefault()
    const registered={
      longUrl: this.state.longUrl
    }
    // 等待post请求完成，确保短链已生成
    await axios.post('http://localhost:5000/api/url/shorten',registered)
    // 再发起get请求拉取全量链接
    const response = await axios.get('http://localhost:5000/')
    const urls = response.data
    // 拿到返回数据后再过滤得到当前长链对应的短链
    const shortenedUrl = urls.filter(url => url.longUrl === this.state.longUrl).map(filteredUrl => filteredUrl.shortUrl)[0] || ''
    // 一次性更新所有需要修改的state
    this.setState({
      urls,
      shortenedUrl,
      longUrl:''
    })
  }
  render(){
    return( 
    <div className="App">
    <header className="App-header">
      <form onSubmit={this.onSubmit} style={{
      display: 'flex',
      flexDirection: 'column'}}>
      <TextField value={this.state.longUrl} onChange={this.changelongUrl}
      style={{ marginBottom: 22 }} className="textfield" id="outlined-basic" 
      label="Please Input Your Link" variant="outlined" />
      <Button style={{
      marginBottom: 22,
      backgroundColor: "#47597E",
      padding: "10px 20px",
      fontSize: "18px"}} 
      variant="contained" type= 'Submit'>Shorten</Button>
      </form>
      {/* 短链存在时才显示 */}
      {this.state.shortenedUrl && <a href={this.state.shortenedUrl} target="_blank" rel="noreferrer">{this.state.shortenedUrl}</a>}
    </header>
  </div>)
   
  }
}

export default App;

优化说明 #

• 用async/await规整异步请求顺序，保证先生成短链再拉取数据
• 把过滤短链的逻辑移到get请求返回之后，直接用返回的最新数据计算，不依赖刚更新的state
• 把shortenedUrl从数组改为字符串类型，更符合实际使用场景
• 增加短链显示的条件判断，避免空链接展示
• 给a标签增加target="_blank"和rel="noreferrer"属性，优化跳转体验

内容的提问来源于stack exchange，提问作者Amine Frikha