javascript - 为什么在我的项目中保存文件后反应应用程序会重新加载?
问题描述
您好,我在 react + graphql + node 和 mongod 中有一个项目,我尝试将图像上传到我的应用程序中的文件夹,但文件保存后重新加载应用程序时遇到问题。在执行上传过程时,我尝试在组件中管理本地状态,但由于重新加载应用程序,我的本地变量更改为初始状态,并且无法显示我的文件的预览。我的目标是显示 img 上传的预览。
我认为我的问题出在解析器中,在函数 storeUpload 中
代码。
API-----------解析器------
const Product = require('../models/Product');
const { createWriteStream } = require("fs");
async function createProduct(root, args) {
console.log(args.file)
let product = await new Product(args)
console.log(product);
product.save()
if(args.file){
const { stream, filename, mimetype, encoding } = await args.file;
await storeUpload({ stream, product });
}
return product
}
const storeUpload = ({ stream, product }) =>
new Promise((resolve, reject) =>
stream
.pipe(createWriteStream("./images/" + product._id +".png"))
.on("finish", () => resolve())
.on("error", reject)
);
module.exports = {
createProduct
}
---反应--- 组件----
import React , { useState, useEffect } from 'react'
import {Grid} from '@material-ui/core'
import { Mutation } from "react-apollo"
import {PRODUCTOS} from './Productos'
import gql from "graphql-tag";
import {StyleStateConsumer} from '../../../Context/StylesStateContext'
/** @jsx jsx */
import { jsx, css } from '@emotion/core'
const borde = css({
borderStyle: 'solid'
})
const contendorForm = css({
borderRadius: 15,
backgroundColor: '#ffffe6'
},borde)
const itemsForm = css({
padding: 15
})
const inputStyle = css({
borderRadius: 5,
padding: 3
})
const ADD_PRODUCT = gql`
mutation CreateProduct($title: String, $price: Float, $file: Upload) {
createProduct(title: $title, price: $price, file: $file) {
_id
title
}
}
`;
const CrearProducto = props =>{
const [titleInput, settitleInput] = useState('')
const [priceInput, setpriceInput] = useState(0)
const [fileInput, setfileInput] = useState('')
const [imgName, setimgName] = useState('default')
const handleChange = e =>{
const {name, type, value} = e.target
if(name === 'titleInput'){settitleInput(value)}
if(name === 'priceInput'){setpriceInput(parseFloat(value))}
}
const imgUpdate = (imgConxt) => {
setimgName(imgConxt)
}
useEffect( imgUpdate )
const handleFile = (obj) =>{console.log(obj)}
return(
<StyleStateConsumer>
{({imagenID, updateHState})=>(
<Grid container css={borde}
direction="row"
justify="center"
alignItems="center">
<Grid item css={contendorForm}>
{imgUpdate(imagenID)}
<Grid container
direction="row"
justify="center"
alignItems="center"><Grid item >Crear Producto:</Grid>
</Grid>
<Grid container>
<Mutation mutation={ADD_PRODUCT} refetchQueries={[{
query: PRODUCTOS
}]}>
{(createProduct, { data, loading })=>{
if (loading) return <div>Loading...</div>
console.log(data)
return(
<div>
<form css={itemsForm}
onSubmit={ (e) => {
e.preventDefault()
createProduct({
variables: {
title: titleInput,
price: priceInput,
file: fileInput
}
})
//
updateHState(res.data.createProduct._id
=== undefined ? '' :
res.data.createProduct._id)
settitleInput('')
setpriceInput(0)
//
console.log(res.data.createProduct._id)
}}>
<Grid item>
<input
css={inputStyle}
type="file"
onChange={({
target: { validity, files:
[file] } }) => validity.valid &&
setfileInput(file)
}
/>
</Grid>
<Grid item>
<label>
Titulo:
</label>
</Grid>
<Grid item>
<input css={inputStyle} type="text"
name="titleInput"
placeholder="Ingresar Título"
value={titleInput}
onChange={handleChange}
/>
</Grid>
<Grid item>
<label>
Precio:
</label>
</Grid>
<Grid item>
<input css={inputStyle} type="number"
name="priceInput"
placeholder="Ingresar Precio"
value={priceInput}
onChange={handleChange}/>
</Grid>
<Grid item>
<input type="submit" name="Crear"/>
</Grid>
</form>
</div>
)
}}
</Mutation>
</Grid>
</Grid>
<Grid item css={[borde,
{
backgroundImage: `url('${require('../../../../../back-
end/images/' + imgName + '.png')}')`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
height: 300,
width: 300}]}>
</Grid>
</Grid>
)}
</StyleStateConsumer>
)
}
export default CrearProducto
解决方案
好吧,首先imgUpdate
你传递给useEffect的函数永远不会得到它的imgConxt
参数。这个钩子只是调用一个空参数函数来在渲染后执行一堆代码。
对于您的主要问题,控制台中是否有任何警告或错误?一个快速但肮脏的解决方法是更改您的输入按钮并在那里的处理程序<input type='submit'>
中执行您的逻辑。onClick
推荐阅读
- php - 关于 PHP 中的 strpos
- excel - 将集合添加为 excel 验证
- python-3.x - 在 seaborn 联合图上设置边缘颜色
- reactjs - React 中 Forge 查看器的最小实现
- php - PHP-FPM 错误 - 不断收到“致命错误:允许的内存大小为 268435456 字节已用尽(尝试分配 107374182448 字节)”
- ember.js - Ember cli 分页 - 无法接收模型?
- python - 在向量场上变换一个 numpy 矩阵
- javascript - 使用 JSON.stringify 将所有内容存储在 localstorage 上
- node.js - 使用 mongoose find() 设置自定义条件以从模型中查找
- r - Choropleth 地图颜色缺失