useEffect 只更新 useState 一次答案

【问题标题】：useEffect only updates useState onceuseEffect 只更新 useState 一次
【发布时间】：2022-01-05 00:38:10
【问题描述】：

useEffect 仅在第一次渲染时更新 useState 一次，但如果我刷新页面，我会得到一个空的数据列表。但是当我在代码中更改某些内容时。第一次刷新时，我会在控制台中看到 useState 所需的数据，但每次刷新时，我只会看到一个空数组。

    const [transaction, setTransaction] = useState([])
    const [family_group, setFamily_group] = useState([])
    const { id } = useParams();

    useEffect(() => {
        getSingleTransaction()

        }
    , [id])

    const getSingleTransaction = async () => {
        const { data } = await axios.get(`/calc/trans/${id}`)
        setTransaction(data)
        setFamily_group(data['family_group'])
    }
    console.log(transaction, "isssssss")
    console.log(family_group, "igggg")

现在我将看到控制台日志数据

但是一旦我刷新页面，我会得到一个空的数据列表。

提前感谢您的建议。

【问题讨论】：

尝试将id 添加到数组中（useEffect 中的第二个参数）。 , []) => , [id])

标签： reactjs react-hooks use-effect

【解决方案1】：

由于异步性质，console.log 在完成 getSingleTransaction 之前不会发生。

   useEffect(() => {
        getSingleTransaction()
        console.log(transaction)
        console.log(family_group)

        }
    , [])

如果您在getSingleTransaction 中添加日志，并且如果它记录id 和data，那么您的代码一切正常。

    const getSingleTransaction = async () => {

        console.log(id);

        const { data } = await axios.get(`/calc/trans/${id}`)

        console.log(data);

        setTransaction(data)
        setFamily_group(data['family_group'])
    }

或者，将两个控制台日志带出useEffect，因为它会在状态更改时记录。

正如@AndreaCostanzo1 在评论中提到的那样，添加 id 作为useEffect 的依赖项。

【讨论】：

@Abdulla Osama，看看这个！！
此外，他忽略了 useEffect 依赖项丢失的警告。由于该功能超出了 useEffect 的范围，因此应弹出警告。在目前的情况下，如果ID发生变化，他的界面不会有任何变化
@AmilaSenadheera 当我 console.log(data) 我看到数据，但是当我 console.log(transaction) 仍然是空数组时
@AbdullaOsama，那么没有问题。将日志移出useEffect。这将始终记录更新的值。
谢谢，现在有道理了@AmilaSenadheera

【解决方案2】：

试试这个：

const [transaction, setTransaction] = useState([])
const [family_group, setFamily_group] = useState([])
const { id } = useParams();

useEffect(() => {
  const getSingleTransaction = async (objId) => {
      const { data } = await axios.get(`/calc/trans/${objId}`)
      setTransaction(data)
      setFamily_group(data['family_group'])
  }

  if (id) {
    getSingleTransaction(id)
  }
, [id])

console.log(transaction, "isssssss")
console.log(family_group, "igggg")

【讨论】：

这个解决方案可以正常工作，直到我刷新页面，然后所有数组再次变为空。