Блог

Главная - Вопросы по программированию - Крюк React useState обновляется только один раз при нажатии

Крюк React useState обновляется только один раз при нажатии

#reactjs

Вопрос:

Я пытаюсь переключить true/false в своем компоненте с помощью useState, но я заметил, что он переключается только один раз и не переходит туда и обратно. При нажатии на компонент он переключается true , но затем не переключается обратно false . Есть какие-нибудь идеи о том, как их решить?

 const [sound, setSound] = useState(false);

return (
    <div>
    <ReactPlayer
         ...
         muted={sound}
         onClick={() => {
             setSound(!sound);
             console.log("on click", sound);
         }}
     />
     </div>
)

Редактировать
Спасибо за ответы, я думаю, что проблема была в функции anon, я решил ее, сделав это

          onClick={() => {
             setSound((sound) => !sound);
             console.log("on click", sound);
         }}

Комментарии:

1. Не могли бы вы, пожалуйста, показать больше кода в вашем компоненте?

2. @sn4ke обновил ответ — проверьте, полезно ли это

3. @Codenewbie не уверен, работает ли это по-другому с youtube или локальным файлом (мой случай), но это решило setSound((sound) => !sound); проблему-это также может быть по-другому, когда на видео происходит нажатие вместо кнопки

Ответ №1:

 import React, {useState} from 'react';
import './App.css';

const ReactPlayer = ({muted, onClick}: {muted: boolean, onClick: () => any}) => {
  return (
    <div>
      <button onClick={onClick}>Test</button>
      <p>{muted.toString()}</p>
    </div>
  )
}

function App() {
  const [sound, setSound] = useState(false);

  return (
    <div className="App">
        <ReactPlayer
        muted={sound}
        onClick={() => {
        setSound(!sound);
        console.log("on click", sound);
      }}
        />
    </div>
  );
}

export default App;

Этот код работает отлично, я не знаю, что у вас есть в компоненте ReactPlayer, но это должно сработать

Ответ №2:

Начиная с Chrome 66, видео должно быть отключено для автоматического воспроизведения. Некоторые плееры, такие как Facebook, не могут быть отключены до тех пор, пока пользователь не начнет взаимодействовать с видео, поэтому вы можете включить элементы управления, позволяющие пользователям самим включать видео. Пожалуйста, установите muted={true}. дополнительную информацию смотрите в документах

Проверьте живой код здесь, в песочнице, по ссылке

 import ReactPlayer from "react-player";
import React, { useState } from "react";

// Render a YouTube video player

export default function App() {
  const [play, setPlay] = useState(true);
  return (
    <div className="App">
      <ReactPlayer
        muted={play}
        url="https://www.youtube.com/watch?v=9DDX3US3kss"
      />
      Click to Mute or Unmute --
      <button style={{ margin: "15px" }} onClick={() => setPlay(!play)}>
        Mute/UnMute
      </button>
    </div>
  );
}
Метки: