Question

我不确定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, proj_name, description, gh_link, live_link, 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代码以反映所做的更改。

Answer 1

我想出了重新渲染的问题..就像将setDetails函数放到useEffect挂钩中一样简单：

useEffect(()=> {
    if(data){
      setDetails(data.projectById)
    }
  },[data])

将道具传递给情态传递每个对象

1 个答案: