调用useState的set函数导致死循环

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

这行得通

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

  useEffect(doStuff,[]);

预期输出：

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

Answer 2

简单的规则是“不要在render函数中设置状态”，因为setState会触发一个render函数，如果在render函数中，你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>
  )
}