为什么脚本的结果不同？

Question

在第一个代码中，我需要单击按钮一次以显示“todo”列表，在第二个代码中，我需要单击两次以显示“todo”列表

差异在于“getUser”内部，这是一个解构变化。

------1

import React, { useState } from 'react'
import axios from 'axios'

const TODOS_URL = 'https://jsonplaceholder.typicode.com/todos';
const USERS_URL = 'https://jsonplaceholder.typicode.com/users';

const UsersAndTodos = () => {
  const [id, setId] = useState('')
  const [user, setUser] = useState({name: '', email: ''})
  const [TodosTitles, setTodosTitles] = useState([])
  const receiveId = (e) => {
    setId(e.target.value)
  }
  const getUser = async () =>{
    const {data: user} = await axios.get(`${USERS_URL}/${id}`)

    setUser({name: user.name, email: user.email})

    if (user.name.startsWith('E')) {
      const { data: userTodos } = await axios.get(`${TODOS_URL}?userId=${id}`)
      const titles = userTodos.map((todo) => todo.title)
      setTodosTitles(titles)
    } else {
      setTodosTitles([]);
    }
  }

  return (
    <>
    <input type='number' onChange={receiveId}/>
    <button onClick={getUser}>send to data base</button>

    <h1>{id}</h1>
    <h1>{user.name}</h1>
    <h1>{user.email}</h1>
    <br />
    <ul>
      {TodosTitles.map((title,index)=>{
        return <li key={index}>{title}</li>
      })}
    </ul>

    </>  
    
    
  )
}

export default UsersAndTodos

------2 与 1 相同，只是“getUser”内部发生变化

  const getUser = async () =>{
    const resp = await axios.get(`${USERS_URL}/${id}`)

    setUser({name: resp.data.name, email: resp.data.email})

Answer 1

在你的第一个例子中：

    const {data: user} = await axios.get(`${USERS_URL}/${id}`)

    setUser({name: user.name, email: user.email})

    if (user.name.startsWith('E')) {
      const { data: userTodos } = await axios.get(`${TODOS_URL}?userId=${id}`)
      const titles = userTodos.map((todo) => todo.title)
      setTodosTitles(titles)
    } else {
      setTodosTitles([]);
    }
  }

• 您在此函数中设置一个常量

  user

  。
• 因此，当您到达

  if (user.name.startsWith('E')) {

  时，它可以使用响应常量中的

  user

  进入语句
• 这意味着您只需点击一次

在你的第二个例子中：

  const getUser = async () =>{
    const resp = await axios.get(`${USERS_URL}/${id}`)

    setUser({name: resp.data.name, email: resp.data.email})

    if (user.name.startsWith('E')) {
      const { data: userTodos } = await axios.get(`${TODOS_URL}?userId=${id}`)
      const titles = userTodos.map((todo) => todo.title)
      setTodosTitles(titles)
    } else {
      setTodosTitles([]);
    }
  }

• 您正在使用 useState 中的

  user

  const [user, setUser] = useState({name: '', email: ''})

• 由于setState是异步的，所以当到达if语句时第一次点击用户还没有被设置
• 当您第二次单击时，状态已设置，因此现在将进入 if 语句

注意事项

• 当你第二次点击时，你正在执行另一个get请求，但用户状态很可能仍然是第一次请求中设置的值

• 在 getUser 中，我会避免使用 const

  user

  ，因为它与 setState 中的

  user

  混淆