React向Screens组件传state时props显示undefined问题求助

你现在的核心问题是渲染了两个完全独立的Screens组件：Sidebar内部渲染了一个带toggleState props的Screens，但你在Home组件里又单独渲染了一个没有传props的Screens——你实际看到的页面内容是Home里的这个Screens，所以它的toggleState自然是undefined。

要解决这个问题，需要用React的状态提升思路：把toggleState状态移到Sidebar和Screens的共同父组件（也就是Home）中，让Home统一管理状态，再把状态和修改状态的方法通过props传递给子组件。

Home.jsx #

import Sidebar from '../components/sidebar';
import Screens from '../components/screens';
import { useState } from 'react';

function Home() {
  // 将状态提升到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 */}
          <Sidebar setToggleState={setToggleState} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', width: 670, height: 752, backgroundColor: '#1e203c' }}>
          {/* 把状态传给Screens */}
          <Screens toggleState={toggleState} />
        </div>
      </div>
    </div>
  );
};

export default Home;

Sidebar.jsx #

// 移除Screens的导入，不再内部渲染它
function Sidebar({ setToggleState }) {
  // 删除原来的toggleState状态定义，直接使用父组件传过来的setToggleState
  return (
    <div>
      <div onClick={() => setToggleState(1)}>
      </div>
      <div onClick={() => setToggleState(2)}>
      </div>
    </div>
  );
};

export default Sidebar;

Screens.jsx（优化版） #

import Homepage from './homepage';

// 可以直接使用父组件传过来的toggleState，无需额外维护isActive状态
function Screens({ toggleState }) {
  console.log(toggleState);

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

export default Screens;

如果一定要保留isActive状态，记得给useEffect加上依赖项避免无限循环：

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

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

  console.log(toggleState);

  // 仅当toggleState变化时更新isActive
  useEffect(() => {
    setIsActive(toggleState);
  }, [toggleState]);

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

export default Screens;

内容的提问来源于stack exchange，提问作者Magnus Tan