Reactjs 反应：如何使用函数usestate/useffect复制特定组件类setstate回调示例？

我正在尝试将带有this.setstate回调的简单React组件转换为带有useState/useEffect的功能组件，但我无法使用后者重现相同的功能

我正在使用一个简单警报/通知系统的示例来在超时后追加和删除警报。沙箱：

相关比较代码：

const NoticesWithFunctionCallback = () => {
  const [state, setState] = useState({
    alerts: [],
    show: false
  });

  const addNotice = (e) => {
    setState({
      alerts: [...state.alerts, ""]
    });
  };

  useEffect(() => {
    (async () => {
      await timeout(3000);
      console.log("timeout occurred");
      const newAlerts = tail([...state.alerts]);
      setState({
        alerts: newAlerts
      });
    })();
  }, [state.alerts]);

  return (
    <div className="App">
      <h3>
        Notices using function component with UseState and UseEffect callback
      </h3>
      <Generator addNotice={addNotice} />
      <Container>
        {state.alerts.map((item, index) => (
          <Alert>some alert here</Alert>
        ))}
      </Container>
    </div>
  );
};

class NoticesWithClassCallback extends React.Component {
  state = {
    alerts: [],
    show: false
  };

  addNotice = (e) => {
    this.setState(
      {
        alerts: [...this.state.alerts, ""]
      },
      async () => {
        await timeout(3000);
        console.log("timeout occurred");
        const newAlerts = tail([...this.state.alerts]);
        this.setState({
          alerts: newAlerts
        });
      }
    );
  };

  render() {
    return (
      <div className="App">
        <h3>Notices using class component and setState callback</h3>
        <Generator addNotice={this.addNotice} />
        <Container>
          {this.state.alerts.map((item, index) => (
            <Alert>some alert here</Alert>
          ))}
        </Container>
      </div>
    );
  }
}

const NoticesWithFunctionCallback=（）=>{
常量[状态，设置状态]=使用状态({
警报：[]，
节目：假
});
const addNotice=（e）=>{
设定状态({
警报：[…state.alerts，“]
});
};
useffect（（）=>{
（异步（）=>{
等待超时（3000）；
日志（“发生超时”）；
const newAlerts=tail（[…state.alerts]）；
设定状态({
警报：新警报
});
})();
}，[state.alerts]）；
返回(
注意将函数组件与UseState和UseEffect回调一起使用
{state.alerts.map（（项，索引）=>(
这里有些警觉
))}
);
};
类通知WithClassCallback扩展React.Component{
状态={
警报：[]，
节目：假
};
addNotice=（e）=>{
这是我的国家(
{
警报：[…this.state.alerts，“]
},
异步（）=>{
等待超时（3000）；
日志（“发生超时”）；
const newAlerts=tail（[…this.state.alerts]）；
这是我的国家({
警报：新警报
});
}
);
};
render（）{
返回(
注意使用类组件和setState回调
{this.state.alerts.map（（项目，索引）=>(
这里有些警觉
))}
);
}
}

我希望得到关于如何使用usestate/useffect将正确运行的类组件setstate回调组件替换为函数组件的建议

---

欢迎任何建议。

从类到功能组件有一些步骤：

步骤1：

class NameOfComponent extends Component

变成

function NameOfComponent(props){

步骤2：删除

构造函数

步骤3：删除
render（）
方法，保留
返回

步骤4。在所有方法之前添加
const

步骤5：删除整个组件中的
此状态

步骤6。删除整个组件中对“this”的所有引用

步骤7：使用
useState（）
设置初始状态（并从“react”导入）

数字示例：

const [count, setCount] = useState(0) // the useState() param is the initial value

对象的示例：

const [form, setValues] = useState({
 id: 0,
 first: ‘’,
 last: ‘’,
 password: ‘’,
 subscribe: false
})

步骤8：-通过您定义的setter更改
此.setState（）
（例如步骤7中的setValue或setCount）

this.setState（{count:this.state.count+1）}
将变成
setCount（count+1）

步骤9:用
useffect

useEffect(() => {
 fetch(‘url’)
 .then(res => res.json())
 .then(items => setSomething(items)
 .catch(console.log(err))
}, [])

第10步：替换componentDidUpdate，否则Component将收到具有useEffect的道具

useEffect(() => {
     console.log(myPropsToCheck+ " has changed ! ")
    }, [myPropsToCheck])
})

在这里没有使用的必要。每次更改警报阵列时都会触发useEffect：通过向其中添加项以及删除项。它也会在初始化后立即触发，所以事情会变得一团糟。相反，您应该修改addNotice函数并使用前一个函数更新状态，如下所示：

const NoticesWithFunctionCallback = () => {
  const [state, setState] = useState({
    alerts: [],
    show: false
  });

  const addNotice = (e) => {
    setState({
      ...state,
      alerts: [...state.alerts, '']
    });
    (async () => {
      await timeout(3000);
      setState(prevState => {
        return {
          ...prevState,
          alerts: [...tail([...prevState.alerts])]
        }
      });
    })()
  };

  return (
    <div className="App">
      <h3>
        Notices using function component with UseState and UseEffect callback
      </h3>
      <p>I want this to replicate the class component but its broken...</p>
      <Generator addNotice={addNotice} />
      <Container>
        {state.alerts.map((item, index) => (
          <Alert key={index}>Alert</Alert>
        ))}
      </Container>
    </div>
  );
};

const NoticesWithFunctionCallback=（）=>{
常量[状态，设置状态]=使用状态({
警报：[]，
节目：假
});
const addNotice=（e）=>{
设定状态({
状态
警报：[…state.alerts'，]
});
（异步（）=>{
等待超时（3000）；
设置状态（prevState=>{
返回{
…国家，
警报：[…尾部（[…prevState.alerts]）]
}
});
})()
};
返回(
注意将函数组件与UseState和UseEffect回调一起使用
我想复制这个类组件，但它已损坏

{state.alerts.map（（项，索引）=>(
警觉的
))}
);
};
谢谢，但问题不在于如何将类组件转换为功能组件，因为这已经完成，而在于如何为这个特定示例重现setstate回调功能。解决方案！谢谢康斯坦丁。