將 state 傳遞給另一個文件時反應 js 道具未定義

Question

我正在嘗試將我的 Sidebar.jsx 中的 toggleState 值作為道具傳遞給另一個文件 Screens.jsx，該文件根據 toggleState 值在顯示主頁或不顯示任何內容之間切換。 但是，當我嘗試訪問 Screens.jsx 中道具的值時，它告訴我該值未定義。

側邊欄.jsx

import Screens from './Screens';
import {useState} from 'react';

function Sidebar() {
  const [toggleState, setToggleState] = useState(1);

  return (
    <div>
      <div
        onClick={() => setToggleState(1)}
      >
      </div>

      <div
        onClick={() => setToggleState(2)}
      >
      </div>

      <Screens toggleState={toggleState} />

    </div>
  );
};

export default Sidebar;

屏幕.jsx

import { useState, useEffect } from 'react';
import Homepage from './homepage';

function Screens({toggleState}) {
  const [isActive, setIsActive] = useState(1);

  console.log(toggleState);

  useEffect(() => {
    setIsActive(toggleState);
  });

  return (
    <div style={{ height: 752 }}>
      { isActive === 1 ? <Homepage /> : null }
    </div>
  );
};

export default Screens;

邊欄和屏幕都導入到我的 Home.jsx 中。 我不確定這是否會導致問題。

主頁.jsx

import Sidebar from '../components/sidebar';
import Screens from '../components/screens';

function Home() {
  return (
    <div>
      <div style={{ display: 'flex', width: 1200, height: 792 }}>

        <div style={{ width: 71, height: 792, marginTop: -42, marginLeft: -10, overflow: 'hidden' }}>
          <Sidebar />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', width: 670, height: 752, backgroundColor: '#1e203c' }}>
          <Screens />
        </div>
      </div>
    </div>
  );
};

export default Home;

Answer 1

useEffect鈎子缺少一個依賴數組來更新本地 state

useEffect(() => {
  setIsActive(toggleState);
}, [setIsActive, toggleState]);

但這在 React 中是一種反模式，只需在組件中直接使用toggleState即可。

function Screens({ toggleState }) {
  return (
    <div style={{ height: 752 }}>
      {toggleState === 1 && <Homepage />}
    </div>
  );
};

您在兩個地方渲染Screens組件，一次在Sidebar組件中，一次在Home組件中。 將 State 提升到公共父組件Home並向下傳遞所有需要的道具。

例子：

function Home() {
  const [toggleState, setToggleState] = useState(1);

  return (
    <div>
      <div style={{ display: 'flex', width: 1200, height: 792 }}>
        <div style={{ width: 71, height: 792, marginTop: -42, marginLeft: -10, overflow: 'hidden' }}>
          <Sidebar {...{ setToggleState, toggleState }} />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', width: 670, height: 752, backgroundColor: '#1e203c' }}>
          <Screens {...{ toggleState }} />
        </div>
      </div>
    </div>
  );
};

Sidebar同時傳遞了setToggleState回調以附加到div元素 onClick handler, and toggleState is passed along to Screens`。

function Sidebar({ toggleState, setToggleState }) {
  return (
    <div>
      <div onClick={() => setToggleState(1)}>
      </div>

      <div onClick={() => setToggleState(2)}>
      </div>

      <Screens toggleState={toggleState} />
    </div>
  );
};

Screens像以前一樣接收toggleState 。

function Screens({ toggleState }) {
  return (
    <div style={{ height: 752 }}>
      {toggleState === 1 && <Homepage />}
    </div>
  );
};

Answer 2

使用 Home 文件中的 state：

import Sidebar from '../components/SideBar';
import Screens from '../components/Screens';

function Home() {

const [toggleState, setToggleState] = useState(1);
  return (
    <div>
      <div style={{ display: 'flex', width: 1200, height: 792 }}>

        <div style={{ width: 71, height: 792, marginTop: -42, marginLeft: -10, overflow: 'hidden' }}>
          <SideBar setToggleState={setToggleState} />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', width: 670, height: 752, backgroundColor: '#1e203c' }}>
          <Screens toggleState={toggleState} />
        </div>
      </div>
    </div>
  );
};

export default Home;

使用 SideBar 文件中的 setState 更改 state 並刪除 de Screens 導入：

function Sidebar({setToggleState}) {

  return (
    <div>
      <div
        onClick={() => setToggleState(1)}
      >
        one
      </div>

      <div
        onClick={() => setToggleState(2)}
      >
       two
      </div>

    </div>
  );
};

export default Sidebar;

不需要在屏幕文件中使用其他 state：

import App from './App';

function Screens({toggleState}) {

  console.log(toggleState);

  return (
    <div style={{ height: 752 }}>
      { toggleState === 1 ? <App /> : null }
    </div>
  );
};

export default Screens;

但是如果你想使用它，你必須告訴你的 useEffect 變量改變：

...
useEffect(() => {
    setIsActive(toggleState);
  },[toggleState]);
...