从类到函数React

Question

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

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,
      blob: null,
      chunks: null,
      duration: {
        h: 0,
        m: 0,
        s: 0,
      },
    };
    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,
      blob: null,
      chunks: null,
      duration: {
        h: 0,
        m: 0,
        s: 0,
      },
    },
  });

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

  const handleRest = () => {
    const reset = {
      url: null,
      blob: null,
      chunks: null,
      duration: {
        h: 0,
        m: 0,
        s: 0,
      },
    };
    setRec({ audioDetails: reset });
  };

  return (
    <div>
      <Recorder
        record={true}
        audioURL={props.audioDetails.url}
        showUIAudio
        handleAudioStop={(data) => handleAudioStop(data)}
        handleRest={() => handleRest()}
      />
    </div>
  );
}

Answer 1

在

audioURL={props.audioDetails.url}

你不能在这里写 props。因为 props 在子组件中使用，所以当子组件从父组件获取数据时，子组件会使用 props 来获取数据。

正如我在您使用的类组件中看到的那样

this.state.audioDetails.url

所以你要做的就是纠正你的代码

audioURL={rec.audioDetails.url}

Answer 2

来自文档：

与类组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新器形式与对象扩展语法相结合来复制此行为：

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

另一个选项是useReducer，它更适合管理包含多个子值的状态对象。