从类到函数 React

大佬教程收集整理的这篇文章主要介绍了从类到函数 React，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决从类到函数 React？

我正在尝试将类组件更改为函数组件，但我不确定如何继续。我试图更改 useState 的状态，但是我无法将信息传递给状态本身，因此例如 URL 始终为空，因此它不起作用。任何人都可以提供有关如何修复它的提示吗？

class Recording extends Component {
  state = {
    audioDetails: {
      url: null,blob: null,chunks: null,duration: {
        h: 0,m: 0,s: 0,},};

  handleAudioStop(data) {
    this.setState({ audioDetails: data });
  }

  handleRest() {
    const reset = {
      url: null,};
    this.setState({ audioDetails: reset });
  }

  render() {
    return (
      <div>
        <Recorder
          record={truE}
          audioURL={this.state.audioDetailS.Url}
          showUIAudio
          handleAudioStop={(data) => this.handleAudioStop(data)}
          handleRest={() => this.handleRest()}
        />
      </div>
    );
  }
}

export default Recording;

export default function Recording(props) {
  const [rec,setRec] = useState({
    audioDetails: {
      url: null,});

  const handleAudioStop = (data) => {
    setRec({ audioDetails: data });
    console.log(rec);
  };

  const handleRest = () => {
    const reset = {
      url: null,};
    setRec({ audioDetails: reset });
  };

  return (
    <div>
      <Recorder
        record={truE}
        audioURL={props.audioDetailS.Url}
        showUIAudio
        handleAudioStop={(data) => handleAudioStop(data)}
        handleRest={() => handleRest()}
      />
    </div>
  );
}

解决方法

1
2
5
125