反应使用效果导致无限循环

问题描述

我在使用useEffect时搜索了很多关于无限循环的帖子，但仍然无法理解

在useEffect中，我试图调用Get Account API，当然，我放置了一个空数组，因为我希望它在呈现后只运行一次。但目前我喜欢添加‘addAccount’函数。所以，如果我按下Add按钮，它就会发送一个POST请求。问题是，我想检查值是否改变了，所以我把值放入第二个参数，也就是空数组，这会导致无限循环。但是，如果我保留空数组，我的屏幕不会重新呈现。

export default function BC() {
  const [value, setValue] = useState([])

  async function getBCAccount() {
    const result = await axios.get("http://localhost:3004/accounts")
    if(result) {
      setValue(result.data)
    }
  }
  
  async function createBCAccount() {
    const result = await axios.post("http://localhost:3004/accounts", {
      id: 5,
      name: "mmm"
    })
  }
  
  useEffect(()=> {
    getBCAccount()
  }, [])

  const handleAddAccount = () => {
    createBCAccount()
  }

  return (
    <BcContainer>
      <button onClick={handleAddAccount}>add</button>
      {value && value.map((v)=> (
        <AccountContainer key={v.id} to={`/bc/${v.id}`}>
          <p>{v.name}</p>
          <p>{v.coin} BTC</p>
        </AccountContainer>
      ))}
    </BcContainer>
  )

推荐答案

我认为您只需在createBCAccount内部调用getBCAccount。在create之后，您将再次调用get数据来更新value：

  async function createBCAccount() {
    await axios.post("http://localhost:3004/accounts", {
      id: 5,
      name: "mmm"
    })
    getBCAccount()
  }

这篇关于反应使用效果导致无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！