如何在组件之间传输图像和数据| React

Question

在项目中，我有一个Upload图像组件，它会要求用户提供图像，然后在页面上预览。图像不是透视的"；上传的"；到任何服务器，我希望它不需要。目标是能够将这个上传的图像与来自API(Image.js(的随机活动图像集进行比较。我遇到的问题是如何在另一个文件中使用previewImage: URL.createObjectURL(event.target.files[0])，或者至少我认为这是正确的思考方式。(对于上下文：这个想法是检查上传的文件和随机活动集之间的相关性。(

我曾试图实现儿童到儿童的状态转移，但当它对儿童到父母部分不起作用时，我放弃了。App.js是父代，Image.js和image-upload.component.js是子代。我也在寻找用redux解决这个问题的方法，但不知道如何存储图像或利用商店内部的状态。为此，我只需要在用户选择文件时更新图像状态。

在一定程度上总结和澄清问题：如何在两个组件之间传输所选的图像文件并使用其中的数据？

这是我在React中的第一个项目，所以代码可能是协同的，充满了"；暴力"；所以我提前为此道歉。非常感谢您的帮助或指导！

App.js:

import React from "react";
import "./App.css";
import Navbar from './components/Navbar/Navbar'
import "bootstrap/dist/css/bootstrap.min.css";
import UploadImages from "./components/image-upload.component";
import Images from "./components/Images";


function App() {

return (
<div className="App">
<Navbar />
<div className="container">
<div className="row">
<div className="col-5">
<div className="content"> 
<h3>Title</h3> 
<h4>Upload my picture here</h4>
<UploadImages/>
</div>
</div>
<div className="col-2">
</div>
<div className="col-5">
<Images />
</div>
</div>
</div>
</div>
);
}
export default App;

Images.js(我猜是纯暴力代码(：

import UploadImages from "./image-upload.component";
import React, {useEffect, useState} from "react";
import "./Images.css";

function shuffleArray(array) {
let i = array.length - 1;
for (; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function Images() {
const [urls, setURLs] = useState([]);
const [count, setCount] =useState(0)
useEffect(() => {
const urls = [
250940,
20622,
436625,
436444,
436509,
359245,
459090,
333933,
333916,
466350,
44831,
383010,
202660,
406317,
337349,
503448,
12617,
248662,
435805,
438545
].map(
(itemId) =>
`https://collectionapi.metmuseum.org/public/collection/v1/objects/${itemId}`
);
shuffleArray(urls)
Promise.all(
urls.map((currUrl) =>
fetch(currUrl)
.then((response) => response.json())
.then((data) => data.primaryImage)
.catch((error) => console.log("There was a problem!", error))
)
).then((fetchedUrls) => setURLs(fetchedUrls));
}, []);

if (count === 3) {
return (
<div>
<div class="imageContainer">
<div class="images__item">
<img class="photo" src={urls[1]} alt="" />
</div>
<div class="images__item">
<img class="photo" src={urls[2]} alt=""  />
</div>
<div class="images__item">
<img class="photo" src={urls[3]} alt=""  />
</div>
</div>
<button
onClick={() => setCount(4)}>
Next
</button>
</div>
)
}

if (count === 4) {
return (
<div>
<div class="imageContainer">
<div class="images__item">
<img class="photo" src={urls[1]} alt=""  />
</div>
<div class="images__item">
<img class="photo" src={urls[2]} alt=""  />
</div>
<div class="images__item">
<img class="photo" src={urls[3]} alt="" />
</div>
<div class="images__item">
<img class="photo" src={urls[4]}  alt="" />
</div>
</div>
<button
onClick={() => setCount(3)}>
Previous
</button>
<button
onClick={() => setCount(5)}>
Next
</button>
</div>
)
}

if (count === 5) {
return (
<div>
<div class="imageContainer">
<div class="images__item">
<img class="photo" src={urls[1]} alt=""  />
</div>
<div class="images__item">
<img class="photo" src={urls[2]} alt=""  />
</div>
<div class="images__item">
<img class="photo" src={urls[3]} alt=""  />
</div>
<div class="images__item">
<img class="photo" src={urls[4]} alt=""  />
</div>
<div class="images__item">
<img class="photo" src={urls[5]} alt=""  />
</div>
</div>
<button
onClick={() => setCount(4)}>
Previous
</button>
<button
onClick={() => {setCount(3); shuffleArray(urls);}}>
Reset
</button>
</div>
)
}

else {
return (
<div>
{/* <UploadImages upsideEmit={getStateFromChild} /> */}
<button
onClick={() => {shuffleArray(urls); setCount(3);}}>
Open
</button>
</div>
);
}

}
export default Images;

image-upload.component.js:

import React, { Component } from "react";
import UploadService from "../services/file-upload.service";
import "./Images"

class UploadImages extends Component {
constructor(props) {
super(props);
this.selectFile = this.selectFile.bind(this);
this.upload = this.upload.bind(this);
this.state = {
currentFile: undefined,
previewImage: undefined,
progress: 0,
message: "",
imageInfos: [],
};
}
componentDidMount() {
UploadService.getFiles().then((response) => {
this.setState({
imageInfos: response.data,
});
});
}
selectFile(event) {
this.setState({
currentFile: event.target.files[0],
previewImage: URL.createObjectURL(event.target.files[0]),
message: ""
});
}
upload() {
this.setState({
progress: 0,
});
UploadService.upload(this.state.currentFile, (files) => {
this.setState({
imageInfos: files.data,
});
})
}
render() {
const {
previewImage,
} = this.state;
return (
<div>
<div className="row">
<div className="col-8">
<label className="btn btn-default p-0">
<input type="file" accept="image/*" onChange={this.selectFile} />
</label>
</div>
<div className="col-4">
</div>
</div>

{previewImage && (
<div>
<img className="preview" src={previewImage} alt="" />
</div>
)}
</div>
);
}
}
export default UploadImages

Answer 1

通常情况下，您会希望使用Context挂钩来实现这一点。

查看本教程https://dev.to/email2vimalraj/react-hooks-lift-up--pass-down-state-using-usecontext-and-usereducer-5ai0