當道具發生變化時如何將組件重新加載回原始 state

Question

我有一個名為props.currPage的道具。 它會根據按下的按鈕進行更新。 每當按下按鈕時，我希望部分組件重置回其原始 state。

目前，當我的道具更改時，我無法讓“收聽此頁面”按鈕重新出現。

這是代碼框。

下面是 header.js 文件。 如果我單擊“收聽此頁面”，它會顯示一個音頻播放器。 如果我單擊“一個”“兩個”或“三個”按鈕（這是另一個組件的一部分），音頻播放器應該 go 消失，並且“收聽此頁面”應該重新出現：

import React, { useState } from "react";
import ReactPlayer from "./ReactPlayerEx";
import { Button } from "@chakra-ui/react";

function Header(props) {
  const [showAudio, setAudio] = useState(0);
  return (
    <>
      {/* <Audio currPage={props.currPage} /> */}
      <div onClick={setAudio}>
        {showAudio ? (
          <ReactPlayer currPage={props.currPage} />
        ) : (
          <Button border={0}> Listen to this Page</Button>
        )}{" "}
      </div>
    </>
  );
}

export default Header;

這是音頻播放器ReactPlayerEx.js ，它會在單擊“收聽此頁面”時呈現

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

function RP(props) {
  const url =
    // "github.com/cre8ture/audioFilesForBL/raw/main/1.mp3"
    "https://github.com/cre8ture/audioFilesForBL/blob/main/" +
    props.currPage +
    ".mp3?raw=true";

  return (
    <div>
      <ReactPlayer
        url={url}
        // "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
        width="200x"
        height="50px"
        // style={{"textAlign": "left", "color": "red", "backgroundColor": "green"}}
        // light
        // playIcon = {<Button border={0} borderRadius={20} p={8}><Play/>  Listen to this Page </Button>}
        playing={false}
        controls={true}
      />
    </div>
  );
}

export default RP;

這里是三個按鈕組件， threeButtons,js

import React from "react";

function Tabs(props) {
  return (
    <>
      <button onClick={() => props.handleChangeProps(1)}>ONE</button>
      <br />
      <button onClick={() => props.handleChangeProps(2)}>TWO</button>
      <br />
      <button onClick={() => props.handleChangeProps(3)}>THRE</button>
    </>
  );
}

export default Tabs;

這是App.js

import React, { useState } from "react";
import Header from "./components/header";
import ConceptTabs from "./components/threeButtons";

function App() {
  const [pageID, setPageID] = useState(0);

  // goes to ConceptTabs
  let handleChange = (id) => {
    console.log("clicked", id);
    setPageID(id);
    return id;
  };

  console.log("pageID", pageID);

  return (
    <>
      <Header currPage={pageID} />
      <br />
      <ConceptTabs handleChangeProps={handleChange} />
      <br />
      {/* <ReactPlayer /> */}
    </>
  );
}

export default App;

謝謝你。 我相信我的問題是對 useEffect() 的了解不足。 我對 React 很陌生。

Answer 1

添加useEffect ，它將在每次props.currPage更改並將ReactPlayer可見性設置為 false 時觸發，前提是它已經為 true。

import React, { useState, useEffect } from "react";
import ReactPlayer from "./ReactPlayerEx";
import { Button } from "@chakra-ui/react";

function Header(props) {
  const [showAudio, setAudio] = useState(false);
 
  useEffect(() => {
    if (showAudio) setAudio(false);
  }, [props.currPage]);

  return (
    <>
      {/* <Audio currPage={props.currPage} /> */}
      <div>
        {showAudio ? (
          <ReactPlayer currPage={props.currPage} />
        ) : (
          <Button border={0} onClick={() => setAudio(true)}>
            Listen to this Page
          </Button>
        )}
      </div>
    </>
  );
}

export default Header;