Question

我尝试克隆状态，更新克隆，然后将状态设置为克隆值，但出现错误“太多重新渲染。React限制了渲染数量以防止无限循环。”

这是我的代码

const [poketypes,setPoketypes] = useState([])   

useEffect(()=>{
    axios.get("https://pokeapi.co/api/v2/type")
    .then(response => {
        setPoketypes(response.data.results);            
    })
},[])

const all = {name:"all",url:""};
const updatedPoketypes = [...poketypes];
updatedPoketypes.push(all);     
setPoketypes(updatedPoketypes);

Answer 1

const App = () => {
  const [poketypes,setPoketypes] = useState([])   

  useEffect(()=>{
      axios.get("https://pokeapi.co/api/v2/type")
      .then(response => {
          setPoketypes(response.data.results);            
      })
  },[])

  const all = {name:"all",url:""};
  const updatedPoketypes = [...poketypes];
  updatedPoketypes.push(all);     
  setPoketypes(updatedPoketypes);

  return somediv;
}

如果您可以看到此组件的主体，将调用setPoketypes，并重新渲染App的整个主体，并在重新渲染时，将setPoketypes再次调用，然后再次重新渲染，因此您遇到了无限循环。

根据您的需要，您实际上应该将setPoketypes的范围确定为某些特定的event或function调用。

更新我猜想您想在数组的末尾将all添加到poketypes中，如果是的话，请查看下面的代码。

const App = () => {
  const [poketypes,setPoketypes] = useState([])   

  useEffect(()=>{
      axios.get("https://pokeapi.co/api/v2/type")
      .then(response => {
          const all = {name:"all",url:""};
          setPoketypes([...response.data.results, all]);            
      })
  },[])

  return somediv;
}

您要么要分配all作为poketypes的默认值之一，要么可以将其放置在useEffect中，如上所示

更新Hooks状态导致无限循环

1 个答案: