useEffect 后变量值重置答案

【问题标题】：Variable value resets after useEffectuseEffect 后变量值重置
【发布时间】：2021-05-24 15:55:15
【问题描述】：

我目前有这样的事情：

const Edit_History = (props) => {
  
    var thing = ''
  
    useEffect(() => {
      const id = props.match.params.id
        if (thing === '')
            axios.get(`http://localhost:3010/v0/student/${id}/${id}`)
            .then(({ data }) => {
                thing = data
                console.log(thing)
            })
    }, [])

    const submitHandler = async (e) => {
      console.log(thing)
      etc...
    }

当我第一次在 useEffect 中打印出“事物”时，我得到了我想要的值。但是当我尝试使用提交处理程序在提交时打印它时，它会打印出一个空字符串，即使我没有在 useEffect 之外修改“字符串”的值。我不知道为什么会发生这种情况。

编辑：

我最初尝试使用 useState

const Edit_History = (props) => {
  
    const [thing, setThing] = useState("")
  
    useEffect(() => {
      const id = props.match.params.id
            axios.get(`http://localhost:3010/v0/student/${id}/${id}`)
            .then(({ data }) => {
                setThing(data)
                console.log(thing)
            })
    }, [])

    const submitHandler = async (e) => {
      console.log(thing)
      etc...
    }

但是在 setThing(data) 之后，事情仍然是未定义的，这就是为什么我尝试使用 var thing 而不是 useState。

【问题讨论】：

使用 useState 而不是普通的 var。
使用setThing(data) 并使用钩子const [thing, setThing] = React.useState("") 而不是var thing = ''。 if (thing === '') 是不必要的。请参阅 hooks 和 useEffect 的文档
@ggorlen 那是我最初尝试的，但由于某种原因，在 setThing 之后“东西”未定义
您可以编辑帖子以显示该代码吗？谢谢。
@ggorlen 我刚刚更新了帖子

标签： reactjs

【解决方案1】：

组件函数基本上在每次渲染时一遍又一遍地运行，每次重新渲染时 var 都会重新初始化为 ''。使用 state 将变量的值在渲染之间保持不变。

【讨论】：

【解决方案2】：

您的 useState 方法几乎是正确的。请记住，当您设置状态时，状态不会立即更新。如果您想查看您的状态是否已更新，请编写一个 useEffect 来“收听”它：

const Edit_History = (props) => {

const [thing, setThing] = useState("");

// this will trigger every time thing changes, whenever it changes
useEffect(
    () => console.log('thing', thing),
    [thing]
);

useEffect(() => {
  const id = props.match.params.id
        axios.get(`http://localhost:3010/v0/student/${id}/${id}`)
        .then(({ data }) => {
            setThing(data)
            console.log('data: ', data)    // see if your data is not undefined
        })
}, [])

const submitHandler = async (e) => {
  console.log(thing)
  etc...
}

永远记住，反应状态更新是异步的。每当您设置状态时，它将继续完成它已经拥有的同步任务。一旦完成，所有的 setStates 将触发组件的“重新渲染”，并带有新的状态值。此时您会看到更新后的状态。

【讨论】：