如何解决将道具传递给情态传递每个对象
我不确定100％发生了什么事。我有一个显示组件，它使用一个基于我的数据库的地图来显示一堆纸牌-纸牌上是一个编辑按钮，弹出一个模态，将道具传递给编辑表单。这有点像：
import React,{ useState } from 'react'
import { useQuery,useMutation } from '@apollo/client'
import { GET_ALL_PROJECTS,REMOVE_PROJECT } from '../helpers/queries'
import { makeStyles } from '@material-ui/core/styles'
import DeleteIcon from '@material-ui/icons/Delete'
import EditIcon from '@material-ui/icons/Edit'
import AddForm from './AddForm'
import EditForm from './EditForm'
import AlertMessage from '../Alerts/AlertMessage'
import { Grid,Typography,Card,CardActionArea,CardActions,CardContent,CardMedia,Button,Modal,Backdrop,Fade } from '@material-ui/core'
const useStyles = makeStyles((theme) => ({
modal: {
display: 'flex',alignItems: 'center',justifyContent: 'center',},paper: {
backgroundColor: theme.palette.background.paper,border: '2px solid #000',boxShadow: theme.shadows[5],padding: theme.spacing(2,4,3),}));
const DisplayProjects = () => {
const styles = useStyles()
const [deleteItem] = useMutation(REMOVE_PROJECT)
const { loading,error,data } = useQuery(GET_ALL_PROJECTS)
const [status,setStatusBase] = useState('')
const [resultMessage,setResultMessage] = useState('')
const [addOpen,setAddOpen] = useState(false)
const [editOpen,setEditOpen] = useState(false)
const onDelete = (id,e) => {
e.preventDefault()
deleteItem({
variables: { id },refetchQueries: [{ query: GET_ALL_PROJECTS }]
}).then(
res => handleSuccess(res),err => handleError(err)
)
}
// Handles Result of the Delete Operation
const handleSuccess = (res) => {
console.log(res.data.deleteProject.proj_name)
// console.log('success!');
setResultMessage(res.data.deleteProject.proj_name)
setStatusBase({
msg: `Successfully Deleted ${resultMessage}`,key: Math.random()
})
}
const handleError = (err) => {
console.log('error')
}
//Handles the Modal for Add Project
const handleAddOpen = () => {
setAddOpen(true);
};
const handleAddClose = () => {
setAddOpen(false);
};
//Handles the Modal for Edit Project
const handleEditOpen = () => {
setEditOpen(true);
};
const handleEditClose = () => {
setEditOpen(false);
};
if (loading) return '...Loading'
if (error) return `Error: ${error.message}`
return (
<div>
<div style={{ marginTop: 20,padding: 30 }}>
<Grid container spacing={8} justify='center' alignItems='center'>
{data.projects.map(p => {
return (
<Grid item key={p._id}>
<Card >
<CardActionArea>
<div style={{ display: 'flex',justifyContent: 'center' }}>
<CardMedia
style={{ width: 400,height: 100,paddingTop: 10,}}
component='img'
alt='Project Image'
height='140'
image={require('../../images/html-css-javascript-lg.jpg')}
/>
</div>
<CardContent >
<Typography gutterBottom variant='h5' component="h2">
{p.proj_name}
</Typography>
<Typography component='p'>
{p.description}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button>
<DeleteIcon onClick={e => onDelete(p._id,e)} />
</Button>
<Button onClick={handleEditOpen}>
<Modal
open={editOpen}
onClose={handleEditClose}
closeAfterTransition
BackdropComponent={Backdrop}
className={styles.modal}
>
<Fade in={editOpen}>
<div className={styles.paper}>
<EditForm
id={p._id}
close={handleEditClose}
name={p.proj_name}
desc={p.description}
gh={p.gh_link}
live={p.live_link}
img={p.image_url}
/>
</div>
</Fade>
</Modal>
<EditIcon />
</Button>
</CardActions>
</Card>
{ status ? <AlertMessage key={status.key} message={status.msg} /> : null}
</Grid>
)
}
)}
</Grid>
<Button type='button' onClick={handleAddOpen}>Add Project</Button>
<Modal
open={addOpen}
onClose={handleAddClose}
closeAfterTransition
BackdropComponent={Backdrop}
className={styles.modal}
>
<Fade in={addOpen}>
<div className={styles.paper}>
<AddForm close={handleAddClose} />
</div>
</Fade>
</Modal>
</div>
</div >
)
}
export default DisplayProjects
这是表格。我已经将这些道具分解为变量，并将它们放置在一个称为详细信息的状态对象中，以便可以将其覆盖并提交给数据库。
import React,{ useState } from 'react'
import { useParams } from 'react-router-dom'
import { useMutation,useQuery } from '@apollo/client'
import { EDIT_PROJECT,GET_ALL_PROJECTS,GET_PROJECT_BY_ID} from '../helpers/queries'
const AddForm = (props) => {
const params = useParams()
const id = params.toString()
// console.log(id);
const [editProjectItem] = useMutation(EDIT_PROJECT)
const {loading,data,error} = useQuery(GET_PROJECT_BY_ID,{
variables: {
id
},})
const [details,setDetails] = useState({})
if (loading) return '...Loading';
if (error) return <p>ERROR: {error.message}</p>;
if (!data) return <p>Not found</p>;
setDetails(data.projectById)
console.log(data.projectById)
const submitForm = e => {
e.preventDefault()
try {
editProjectItem({
variables: { id,proj_name,description,gh_link,live_link,image_url},refetchQueries: [{query: GET_ALL_PROJECTS}]
})
}
catch (err) {
console.log('You Goofed')
}
// setDetails({
// proj_name: '',// description: '',// gh_link: '',// live_link: '',// image_url: ''
// })
props.close()
}
const changeDetails = (e) => {
setDetails({
...details,[e.target.name]: e.target.value
})
}
const {_id,image_url} = details
return (
<div key = {_id}>
<h2>Edit {proj_name}</h2>
<form onSubmit = {submitForm} >
<label>
Project Name:
<input
name = 'proj_name'
value = {proj_name}
onChange = {changeDetails}
/>
</label>
<label>Description</label>
<input
name = 'description'
value = {description}
onChange = {changeDetails}
/>
<label>GitHub Link</label>
<input
name = 'gh_link'
value = {gh_link}
onChange = {changeDetails}
/>
<label>Live Link</label>
<input
name = 'live_link'
value = {live_link}
onChange = {changeDetails}
/>
<label>Preview Image</label>
<input
name = 'image_url'
value = {image_url}
onChange = {changeDetails}
/>
<button type = 'submit'>Submit</button>
</form>
</div>
)
}
export default AddForm
我遇到的问题是，当我访问模态时，道具实际上是从每个对象发送的，而不是从每个对象发送的，并显示最后一条记录的数据而不是我要编辑的记录可以看到这里发生了什么（我登录了props.id进行测试）https://imgur.com/a/pcEKl89
我想念什么？ （免责声明：我仍然是学生，正在学习手工艺品。请对我的代码保持谨慎）
编辑：我只是意识到我没有指出这是EditForm组件的最终形式。我还没有添加进行更新的逻辑，我只是想首先正确显示数据。
EDIT2：我已经对ID的传递方式进行了一些更改，我已经在使用React-Router，所以我继续进行到/ edit /：id的路由，然后使用useParams（）获得了ID那样。它似乎正在运行，但是现在我收到了太多的重新渲染信息。更新了上面的AddForm代码以反映所做的更改。
解决方法
我想出了重新渲染的问题..就像将setDetails函数放到useEffect挂钩中一样简单：
useEffect(()=> {
if(data){
setDetails(data.projectById)
}
},[data])
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。