Javascript 试图在功能组件之间传递状态，但得到'；未定义'；错误

我试图将两组状态从一个组件传递到另一个组件，这样我就可以在React中的标题中列出用户的公司和名称。我知道我得到了正确的信息，因为我在将这两个变量设置为我的状态之前，控制台记录了它们。然而，当我尝试在导航栏中渲染它们时，我得到了未定义的信息

这是我的标题组件：

import React, { useState } from 'react';
import { Route } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap';
import SearchBox from './SearchBox';


const Header = ({ companyName, userName }) => {
  console.log(userName);
  return (
    <header className='admin-bar'>
      <Navbar bg='white' variant='secondary' expand='lg' collapseOnSelect>
        <Container>
          <LinkContainer to='/'>
            <Navbar.Brand>{companyName}</Navbar.Brand>
          </LinkContainer>
       <NavDropdown title={userName} id='basic-nav-dropdown'>
                <NavDropdown.Item href='#action/3.1'>Profile</NavDropdown.Item>
                <NavDropdown.Item href='#action/3.2'>Insights</NavDropdown.Item>
                <NavDropdown.Item href='#action/3.3'>Settings</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href='#action/3.4'>Sign Out</NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;

import React，{useState}来自“React”；
从'react router dom'导入{Route}；
从“react router bootstrap”导入{LinkContainer}；
从“react bootstrap”导入{Navbar、Nav、Container、NavDropdown}；
从“./SearchBox”导入搜索框；
常量头=（{companyName，userName}）=>{
console.log（用户名）；
返回(
{companyName}
轮廓
洞察力
设置
退出
);
};
导出默认标题；

以及我初始化状态的组件：

import Amplify, { Auth } from 'aws-amplify';
import awsconfig from '../aws-exports';
import React, { useState, useEffect } from 'react';
import Upload from '../components/Upload';
import BucketList from '../components/BucketList';

Amplify.configure(awsconfig);

const FileUploadScreen = () => {
  const [companyName, setCompanyName] = useState('');
  const [userSession, setUserSession] = useState('');
  const [userName, setUserName] = useState('');

  const onPageRendered = async () => {
    let user = await Auth.currentAuthenticatedUser();
    let userToken = user.getSignInUserSession().getIdToken().getJwtToken();
    setUserSession(user.getSignInUserSession());
    let base64Url = userToken.split('.')[1];
    let var1 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let var2 = decodeURIComponent(
      atob(var1)
        .split('')
        .map(function (c) {
          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        })
        .join('')
    );
    let company = var2.substring(
      var2.indexOf('company') + 10,
      var2.indexOf('aud') - 3
    );
    console.log(company);
    setCompanyName(company);

    let userAccountName = var2.substring(
      var2.indexOf('"name":') + 8,
      var2.indexOf('exp') - 3
    );
    setUserName(userAccountName);
    console.log(userAccountName);
  };

  useEffect(() => {
    onPageRendered();
  }, []);

  return (
    <>
        <div className='container main p-5'>
          <h3 className='text-center pb-1 font-weight-normal bg-white'>
            Upload Files
          </h3>
          <Upload companyName={companyName} />
          <BucketList companyName={companyName} />
        </div>
    </>
  );
};

export default FileUploadScreen;

导入放大，{Auth}来自“aws放大”；
从“../aws exports”导入awsconfig；
从“React”导入React，{useState，useffect}；
从“../components/Upload”导入上载；
从“../components/BucketList”导入BucketList；
放大、配置（awsconfig）；
const FileUploadScreen=（）=>{
const[companyName，setCompanyName]=useState（“”）；
const[userSession，setUserSession]=useState（“”）；
const[userName，setUserName]=useState（“”）；
const onPageRendered=async（）=>{
let user=wait Auth.currentAuthenticatedUser（）；
让userToken=user.getSignInUserSession（）.getIdToken（）.getJwtToken（）；
setUserSession（user.getSignInUserSession（））；
让base64Url=userToken.split（'.'）[1]；
设var1=base64Url.replace（/-/g，“+”）.replace（/g，“/”）；
设var2=decodeURIComponent(
atob（var1）
.拆分（“”）
.map（功能（c）{
返回“%”+（'00'+c.charCodeAt（0）.toString（16））.slice（-2）；
})
.加入（“”）
);
让company=var2.substring(
var2.indexOf（‘公司’）+10，
var2.indexOf（'aud'）-3
);
控制台日志（公司）；
setCompanyName（公司）；
让userAccountName=var2.substring(
var2.indexOf（“‘名称’：”）+8，
var2.indexOf（'exp'）-3
);
setUserName（userAccountName）；
console.log（userAccountName）；
};
useffect（（）=>{
onPageRendered（）；
}, []);
返回(
上传文件
);
};
导出默认文件上载屏幕；

和我的App.js文件：

import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import DashboardScreen from './screens/DashboardScreen';
import FileUploadScreen from './screens/FileUploadScreen';
import Sidebar from './components/Sidebar/Sidebar';
import CompanyProfileScreen from './screens/CompanyProfileScreen';
import InsightsScreen from './screens/InsightsScreen';
import WelcomeScreen from './screens/WelcomeScreen';
import Header from './components/Header';

const App = ({ companyName, userName }) => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <Router>
      <Header companyName={companyName} userName={userName} />
      <Sidebar />
      <main className=''>
        <Container>
          <Route path='/company' component={CompanyProfileScreen} />
          <Route path='/insights' component={InsightsScreen} />
          <Route path='/fileupload' component={FileUploadScreen} />
          <Route path='/landscape' component={DashboardScreen} />
          <Route path='/' component={WelcomeScreen} exact />
        </Container>
      </main>
    </Router>
  );
};

export default App;

从'react'导入{useState，useffect}；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从'react bootstrap'导入{Container}；
从“./screens/DashboardScreen”导入仪表板屏幕；
从“./screens/FileUploadScreen”导入FileUploadScreen；
从“./components/Sidebar/Sidebar”导入侧栏；
从“/screens/CompanyProfileScreen”导入CompanyProfileScreen；
从“/screens/InsightsScreen”导入InsightsScreen；
从“./screens/WelcomeScreen”导入WelcomeScreen；
从“./components/Header”导入标题；
常量应用=（{companyName，userName}）=>{
const[isLoading，setIsLoading]=useState（true）；
返回(
);
};
导出默认应用程序；

正如我所说，我在console.log中获得了正确的名称（公司和用户名），但一旦我传递了它们，就什么也没有了

我已经在此处添加了BucketList组件和Upload组件的代码，以供参考：

import { useState, useEffect } from 'react';
import AWS from 'aws-sdk';
import { ListGroup } from 'react-bootstrap';

AWS.config.update({
  accessKeyId: process.env.REACT_APP_ACCESS_ID,
  secretAccessKey: process.env.REACT_APP_ACCESS_KEY,
  region: process.env.REACT_APP_REGION,
});
const s3 = new AWS.S3();

const BucketList = ({ companyName }) => {
  const [listFiles, setListFiles] = useState([]);
  const [isVisible, setIsVisible] = useState(false);

  const params = {
    Bucket: process.env.REACT_APP_BUCKET_NAME,
    Delimiter: '',
  };

  useEffect(() => {
    s3.listObjectsV2(params, (err, data) => {
      if (err) {
        console.log(err, err.stack);
      } else {
        setListFiles(data.Contents);
      }
    });
  }, []);

  // Filtering correct file names
  let files = [];
  for (let i = 0; i < listFiles.length; i++) {
    let str = listFiles[i].Key;
    if (
      str.includes('OUTPUT') &&
      str !== `${companyName}/` &&
      str !== 'OUTPUT' &&
      str.startsWith(companyName)
    ) {
      files.push(str);
    }

    for (let i = 0; i < files.length; i++) {
      if (
        files[i].endsWith(
          'vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        )
      ) {
        files[i] = files[i].replace(
          '.vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          '.xlsx'
        );
      } else if (files[i].endsWith('.vnd.ms-excel')) {
        files[i] = files[i].replace('.vnd.ms-excel', '.csv');
      }
    }
  }

  // Adding dynamic class to card for scroll
  useEffect(() => {
    files.length > 3 && setIsVisible(true);
  }, [files.length]);

  return (
    <div className={`card my-4 ${isVisible ? 'test' : ''}`}>
      <div className='card-header'>{companyName} Current Files</div>
      <ListGroup className='list-group'>
        {files &&
          files.map((name, index) => (
            <ListGroup.Item key={index}>
              {name.split('/').slice(2)}
            </ListGroup.Item>
          ))}
      </ListGroup>
    </div>
  );
};

export default BucketList;

从'react'导入{useState，useffect}；
从“AWS sdk”导入AWS；
从“react bootstrap”导入{ListGroup}；
AWS.config.update({
accessKeyId:process.env.REACT\u APP\u ACCESS\u ID，
secretAccessKey:process.env.REACT\u APP\u ACCESS\u KEY，
区域：process.env.REACT\u APP\u区域，
});
const s3=新的AWS.s3（）；
const BucketList=（{companyName}）=>{
const[listFiles，setListFiles]=useState（[]）；
const[isVisible，setIsVisible]=useState（false）；
常量参数={
Bucket:process.env.REACT\u APP\u Bucket\u NAME，
分隔符：“”，
};
useffect（（）=>{
s3.listObjectsV2（参数，（错误，数据）=>{
如果（错误）{
日志（err，err.stack）；
}否则{
setListFiles（data.Contents）；
}
});
}, []);
//筛选正确的文件名
让文件=[]；
for（设i=0；i{
files.length>3&&setIsVisible（true）；
}，[files.length]）；
返回(
{companyName}当前文件
{文件&&
files.map（（名称、索引）=>(
{name.split（'/'）.slice（2）}
))}
);
};
导出默认BucketList；

import React，{useRef，useState，Fragment，useffect}来自'React'；
从“react bootstrap”导入{ListGroup}；
从“/Message”导入消息；
从“/ProgressBar”导入ProgressBar；
从“AWS sdk”导入AWS；
常量上载=（{companyName}）=>{
const bucketName=process.env.REACT\u APP\u BUCKET\u NAME；
const fileInput=useRef（）；
const[filename，setFilename]=使用
import React, { useRef, useState, Fragment, useEffect } from 'react';
import { ListGroup } from 'react-bootstrap';
import Message from './Message';
import ProgressBar from './ProgressBar';
import AWS from 'aws-sdk';

const Upload = ({ companyName }) => {
  const bucketName = process.env.REACT_APP_BUCKET_NAME;

  const fileInput = useRef();

  const [filename, setFilename] = useState('Choose File');
  const [message, setMessage] = useState('');
  const [fileInfos, setFileInfos] = useState([]);
  const [progress, setProgress] = useState(0);
  const [showProgressBar, setShowProgressBar] = useState(false);
  const [isScroll, setIsScroll] = useState(false);

  const selectFile = (e) => {
    setFilename(e.target.files[0].name);
  };

  const handleClick = (event) => {
    event.preventDefault();
    let newArr = fileInput.current.files;
    for (let i = 0; i < newArr.length; i++) {
      handleUpload(newArr[i]);
    }
  };

  AWS.config.update({
    accessKeyId: process.env.REACT_APP_ACCESS_ID,
    secretAccessKey: process.env.REACT_APP_ACCESS_KEY,
  });

  const myBucket = new AWS.S3({
    params: {
      Bucket: `${bucketName}/${companyName}`,
    },
    region: process.env.REACT_APP_REGION,
  });

  const handleUpload = (file) => {
    const params = {
      ACL: 'public-read',
      Key: file.name,
      ContentType: file.type,
      Body: file,
    };

    let newFileName = file.name;

    myBucket
      .putObject(params)
      .on('httpUploadProgress', (evt) => {
        setProgress(Math.round((evt.loaded / evt.total) * 100));
        setFileInfos([newFileName, ...fileInfos]);
        setMessage('File uploaded');
      })
      .send((err) => {
        if (err) {
          console.log(err);
          setShowProgressBar(false);
          setMessage('Could not upload file');
        }
      });
  };

  useEffect(() => {
    fileInfos.length >= 2 && setIsScroll(true);
  }, [fileInfos.length]);

  if (progress === 100) {
    setTimeout(() => {
      setProgress(0);
      setShowProgressBar(false);
      setMessage('');
    }, 3000);
  }

  return (
    <Fragment>
      <form className='bg-white my-4' onSubmit={handleClick}>
        {message ? <Message msg={message} /> : null}
        <div className='custom-file mb-2'>
          <input
            type='file'
            onChange={selectFile}
            multiple
            ref={fileInput}
            id='customFile'
            className='custom-file-input'
          />

          <label className='custom-file-label' htmlFor='customFile'>
            {filename}
          </label>
        </div>
        {showProgressBar ? <ProgressBar percentage={progress} /> : null}

        <input
          type='submit'
          value='Upload'
          className='btn btn-primary btn-block mt-3'
          disabled={filename === 'Choose File'}
          onClick={() => setShowProgressBar(true)}
        />

        <br />

        <div className={`card ${isScroll ? 'test' : ''}`}>
          <div className='card-header'>Recently Added</div>
          <ListGroup className='list-group'>
            {fileInfos &&
              fileInfos.map((file, index) => (
                <ListGroup.Item key={index}>{file}</ListGroup.Item>
              ))}
          </ListGroup>
        </div>
      </form>
    </Fragment>
  );
};

export default Upload;


useEffect(() => {
    onPageRendered();
  }, [companyName, userName]);