reactjs - de la clase a las funciones React

Estoy intentando cambiar un componente de clase a un componente de función pero no estoy seguro de cómo proceder. Intenté cambiar el estado de useState pero luego no logré pasar la información al estado mismo, por lo que la URL, por ejemplo, siempre es nula, por lo que no funciona. ¿Alguien puede darnos una pista sobre cómo solucionarlo?

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>
  );
}

2

Estás intentando acceder a la URL desde accesorios en lugar de desde estado. audioURL={props.audioDetails.url} debe ser audioURL={rec.audioDetails.url}

Linda Paiste

28/03/2021 a las 10:40

------------------------------------

En audioURL={props.audioDetails.url} no puedes escribir accesorios aquí. Debido a que los accesorios se usan en el componente secundario, cuando el niño obtiene datos del perent, el niño usa accesorios para buscar datos. Como puedo ver en tu componente de clase, usaste this.state.audioDetails.url. Entonces lo que tienes que hacer es corregir tu código audioURL={rec.audioDetails.url}.

------------------------------------

De los documentos:

A diferencia del método setState que se encuentra en los componentes de la clase, useState no fusiona automáticamente los objetos de actualización. Puede replicar este comportamiento combinando el formulario del actualizador de funciones con la sintaxis de distribución de objetos:

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

Otra opción es useReducer, que es más adecuada para gestionar objetos de estado que contienen múltiples subvalores.