Question

import React from 'react';
import Test from './Test';

function App() {
  return (
    <Test />
  );
}

export default App;

import React, { useState } from "react";

const Test = () => {
  const [stuff, setStuff] = useState({ a: "alpha", b: "alpha" });

  setStuff({                // this causes infinite loop!
    ...stuff,               // removing setStuff() fixes it.
    a: "omega"
  });

  return <p>{JSON.stringify(stuff)}</p>;
};

export default Test;

我在Test.js中使用useState（），而setStuff（）导致无限循环。

有人可以解释为什么吗？以及如何解决（如果我想调用setStuff来更新内容）？

这是工作代码和框：https://codesandbox.io/s/loving-jennings-pr3nl

Answer 1

简单的规则是“不要在渲染功能中设置状态” ，因为setState将触发一个渲染功能，如果在渲染功能中使用setState，则它会一直运行。

您应将“ setState”绑定到事件，例如单击鼠标，键盘按下或组件完成加载事件，并在该事件中设置setState。...但永远不要在渲染功能中使用。

在类组件中

import React from 'react'
class Test extends React.Component {
  render() {
    // Don't setState here.
    return (<div>test</div>)
  }
}

在功能组件中

const Test = () => {
  // Don't setState here.
  return (<div>test</div>)
}

**更新

如何使用setState的示例

在类组件中

import React from 'react'
class Test extends React.Component {
  state = {
    value: 4
  }

  handleClickAdd = (e) => {
    const currentValue = this.state.value; 
    this.setState({ value: currentValue + 1 }); // set currentValue + 1 as a new state value.
  }

  render() {
    // Don't setState here.
    return (
      <div>
        test {this.state.value}
        <button onClick={this.handleClickAdd}>Add</button>
      </div>
    )
  }
}

在功能组件中

const Test = () => {

  const [value, setValue] = useState(4);

  const handleClickAdd = e => {
    setValue(value + 1);
  }

  // Don't setState here.
  return (
    <div>
      test {value}
      <button onClick={handleClickAdd}>Add</button>
    </div>
  )
}

Answer 2

这有效

const doStuff=()=>{
    setStuff({
      ...stuff,
      a: "omega"
    });
  };

  useEffect(doStuff,[]);

预期输出：

{"a":"omega","b":"alpha"}

调用useState的set函数导致无限循环

2 个答案: