Javascript 如果从未传入参数，arrow函数如何访问这些参数？

下面的PhotosPage组件是使用

<Route path="/settings/photos" component={PhotosPage} />

但是，使用的参数有两种类型：

• 照片和个人资料是redux州的一部分
• uploadProfileImage、deletePhoto和setMainPhoto是导入的

永远不会被传进来。这些参数是由react传入的，还是我不理解的javascript特性。谢谢

import React, { useState, useEffect, Fragment } from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { firestoreConnect } from "react-redux-firebase";
import {
  Segment,
  Header,
  Divider,
  Grid,
  Button
} from "semantic-ui-react";
import { toastr } from "react-redux-toastr";
import DropzoneInput from "./DropzoneInput";
import CropperInput from "./CropperInput";
import {
  uploadProfileImage,
  deletePhoto,
  setMainPhoto
} from "../../userActions";
import UserPhotos from "./UserPhotos";

const query = ({ auth }) => {
  return [
    {
      collection: "users",
      doc: auth.uid,
      subcollections: [{ collection: "photos" }],
      storeAs: "photos"
    }
  ];
};

const actions = {
  uploadProfileImage,
  deletePhoto
};

const mapState = state => ({
  auth: state.firebase.auth,
  profile: state.firebase.profile,
  photos: state.firestore.ordered.photos
});

const PhotosPage = ({
  uploadProfileImage,
  photos,
  profile,
  deletePhoto,
  setMainPhoto
}) => {
  const [files, setFiles] = useState([]);
  const [image, setImage] = useState(null);

  useEffect(() => {
    return () => {
      files.forEach(file => URL.revokeObjectURL(file.preview));
    };
  }, [files]);

  const handleUploadImage = async () => {
    try {
      await uploadProfileImage(image, files[0].name);
      handleCancelCrop();
      toastr.success("Success", "photo has been uploaded.");
    } catch (error) {
      toastr.error("Ooops", "something whent wrong");
      console.log(error);
    }
  };

  const handleCancelCrop = () => {
    setFiles([]);
    setImage(null);
  };

  const handleDeletePhoto = async photo => {
    //try {
    await deletePhoto(photo);
    // } catch (error) {
    //   toastr.error("OOps", error.message);
    // }
  };

  return (
    <Segment>
      <Header dividing size="large" content="Your Photos" />
      <Grid>
        <Grid.Row />
        <Grid.Column width={4}>
          <Header color="teal" sub content="Step 1 - Add Photo" />
          <DropzoneInput setFiles={setFiles} />
        </Grid.Column>
        <Grid.Column width={1} />
        <Grid.Column width={4}>
          <Header sub color="teal" content="Step 2 - Resize image" />
          {files.length > 0 && (
            <CropperInput setImage={setImage} imagePreview={files[0].preview} />
          )}
        </Grid.Column>
        <Grid.Column width={1} />
        <Grid.Column width={4}>
          <Header sub color="teal" content="Step 3 - Preview & Upload" />
          {files.length > 0 && (
            <>
              <div
                className="img-preview"
                style={{
                  minHeight: "200px",
                  minWidth: "200px",
                  overflow: "hidden"
                }}
              />
              <Button.Group>
                <Button
                  onClick={handleUploadImage}
                  style={{ width: "100px" }}
                  positive
                  icon="check"
                />
                <Button
                  onClick={handleCancelCrop}
                  style={{ width: "100px" }}
                  icon="close"
                />
              </Button.Group>
            </>
          )}
        </Grid.Column>
      </Grid>

      <Divider />
      <UserPhotos
        photos={photos}
        profile={profile}
        deletePhoto={handleDeletePhoto}
      />
    </Segment>
  );
};

export default compose(
  connect(
    mapState,
    actions
  ),
  firestoreConnect(auth => query(auth))
)(PhotosPage);

import React，{useState，useffect，Fragment}来自“React”；
从“react redux”导入{connect}；
从“redux”导入{compose}；
从“react-redux firebase”导入{firestoreConnect}；
进口{
段
标题，
分隔器，
网格，
按钮
}从“语义用户界面反应”；
从“react redux toastr”导入{toastr}；
从“/DropzoneInput”导入DropzoneInput；
从“/CropperInput”导入CropperInput；
进口{
上传档案图像，
删除照片，
setMainPhoto
}来自“../../userActions”；
从“/UserPhotos”导入用户照片；
常量查询=（{auth}）=>{
返回[
{
集合：“用户”，
doc:auth.uid，
子集合：[{集合：“照片”}]，
storeAs：“照片”
}
];
};
常量动作={
上传档案图像，
删除照片
};
常量映射状态=状态=>({
auth:state.firebase.auth，
配置文件：state.firebase.profile，
照片：state.firestore.ordered.photos
});
常数页=({
上传档案图像，
照片，
轮廓
删除照片，
setMainPhoto
}) => {
const[files，setFiles]=useState（[]）；
const[image，setImage]=useState（null）；
useffect（（）=>{
return（）=>{
files.forEach（file=>URL.revokeObjectURL（file.preview））；
};
}，[文件]；
const handleUploadImage=async（）=>{
试一试{
等待上载ProfileImage（图像，文件[0]。名称）；
handleCancelCrop（）；
toastr.success（“success”，“照片已上传”）；
}捕获（错误）{
犯错误（“哎呀”，“出了什么事”）；
console.log（错误）；
}
};
常量handleCancelCrop=（）=>{
setFiles（[]）；
setImage（空）；
};
const handleDeletePhoto=异步照片=>{
//试一试{
等待删除照片（照片）；
//}捕获（错误）{
//toastr.error（“OOps”，error.message）；
// }
};
返回(
{files.length>0&&(
)}
{files.length>0&&(
)}
);
};
导出默认组合(
连接(
mapState，
行动
),
firestoreConnect（身份验证=>query（身份验证））
)（照片页）；

当我们用“Connect”包装一个组件时，它就会连接到我们的Redux存储。然后我们可以给它两个函数——mapStateToProps（将我们的存储状态映射到组件道具）和mapDispatchToProps（将我们的存储操作映射到组件）。这些动作成为我们可以从组件调用的道具的一部分

import React, { useState, useEffect, Fragment } from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { firestoreConnect } from "react-redux-firebase";
import {
  Segment,
  Header,
  Divider,
  Grid,
  Button
} from "semantic-ui-react";
import { toastr } from "react-redux-toastr";
import DropzoneInput from "./DropzoneInput";
import CropperInput from "./CropperInput";
import {
  uploadProfileImage,
  deletePhoto,
  setMainPhoto
} from "../../userActions";
import UserPhotos from "./UserPhotos";

const query = ({ auth }) => {
  return [
    {
      collection: "users",
      doc: auth.uid,
      subcollections: [{ collection: "photos" }],
      storeAs: "photos"
    }
  ];
};

const actions = {
  uploadProfileImage,
  deletePhoto
};

const mapState = state => ({
  auth: state.firebase.auth,
  profile: state.firebase.profile,
  photos: state.firestore.ordered.photos
});

const PhotosPage = ({
  uploadProfileImage,
  photos,
  profile,
  deletePhoto,
  setMainPhoto
}) => {
  const [files, setFiles] = useState([]);
  const [image, setImage] = useState(null);

  useEffect(() => {
    return () => {
      files.forEach(file => URL.revokeObjectURL(file.preview));
    };
  }, [files]);

  const handleUploadImage = async () => {
    try {
      await uploadProfileImage(image, files[0].name);
      handleCancelCrop();
      toastr.success("Success", "photo has been uploaded.");
    } catch (error) {
      toastr.error("Ooops", "something whent wrong");
      console.log(error);
    }
  };

  const handleCancelCrop = () => {
    setFiles([]);
    setImage(null);
  };

  const handleDeletePhoto = async photo => {
    //try {
    await deletePhoto(photo);
    // } catch (error) {
    //   toastr.error("OOps", error.message);
    // }
  };

  return (
    <Segment>
      <Header dividing size="large" content="Your Photos" />
      <Grid>
        <Grid.Row />
        <Grid.Column width={4}>
          <Header color="teal" sub content="Step 1 - Add Photo" />
          <DropzoneInput setFiles={setFiles} />
        </Grid.Column>
        <Grid.Column width={1} />
        <Grid.Column width={4}>
          <Header sub color="teal" content="Step 2 - Resize image" />
          {files.length > 0 && (
            <CropperInput setImage={setImage} imagePreview={files[0].preview} />
          )}
        </Grid.Column>
        <Grid.Column width={1} />
        <Grid.Column width={4}>
          <Header sub color="teal" content="Step 3 - Preview & Upload" />
          {files.length > 0 && (
            <>
              <div
                className="img-preview"
                style={{
                  minHeight: "200px",
                  minWidth: "200px",
                  overflow: "hidden"
                }}
              />
              <Button.Group>
                <Button
                  onClick={handleUploadImage}
                  style={{ width: "100px" }}
                  positive
                  icon="check"
                />
                <Button
                  onClick={handleCancelCrop}
                  style={{ width: "100px" }}
                  icon="close"
                />
              </Button.Group>
            </>
          )}
        </Grid.Column>
      </Grid>

      <Divider />
      <UserPhotos
        photos={photos}
        profile={profile}
        deletePhoto={handleDeletePhoto}
      />
    </Segment>
  );
};

export default compose(
  connect(
    mapState,
    actions
  ),
  firestoreConnect(auth => query(auth))
)(PhotosPage);