在 CRUD 操作 React、ContextAPI、Node

如何解决在 CRUD 操作 React、ContextAPI、Node

我想在 MERN 堆栈中进行简单的 CRUD 操作，但我遇到了编辑问题，因为当我想编辑特定项目时，该项目的值不会显示。我尝试以两种方式执行此操作，首先通过组件简单发送数据（editItem），然后仅发送 id 并在上下文 api 中按状态找到它。编辑正在工作，数据正在发送（在 EditItem 屏幕上的 console.log 中显示），但值未显示在输入中。我究竟做错了什么？ 我想在同一条路线上的开放模式中执行此操作，而不是在另一条路线“/edit/:id”上执行此操作 顺便说一下，添加项目和删除工作正常。

主站点：

const AdminMain = () => {
  const [{adminPhones},dispatch] = useContext(StateContext)
  const [phones,setPhones] = useState([])
  const [addPhone,setAddPhone] = useState({})
  const [open,setOpen] = useState(false)
  const [edit,setEdit] = useState(false)
  const [editItem,setEditItem] = useState('')



  useEffect(() => {
    const fetchPhones = async () => {
      const { data } = await axios.get('/api/phones')
      dispatch({type: actionTypes.ADMIN_GET_PHONES,payload: data})
      console.log(data,'Phone')
      //setPhones(data)
    }

    fetchPhones()
  },[])

  const showPhones = adminPhones.map((phone,index) => (
    <TableRow key={index}>
      <td>{phone.series}</td>
      <td>{phone.model}</td>
      <td>{phone.description}</td>
      <td>{phone.cpu}</td>
      <td>{phone.ram}</td>
      <td>{phone.storage}</td>
      <td>{phone.camera}</td>
      <td>{phone.size}</td>
      <td>{phone.battery}</td>
      <td>{phone.price}</td>
      <td>{phone.img}</td>
      <td><button onClick={() => {setEdit(!edit); setEditItem(phone); console.log(phone,'in edit')}}>Edit</button> <form><button type="submit" onClick={() => axios.delete(`/api/phones/${phone._id}`)}>X</button></form></td>
    </TableRow>
  ))
  return (
      <>
      <AdminContainer>
      <AddButton onClick={() => setOpen(!open)}><ButtonSpan>+</ButtonSpan></AddButton>
      <AddItem open={open} />
      <EditItem edit={edit} editItem={editItem} />
        <Table>
          <TableHead>
            <td>Series</td>
            <td>Model</td>
            <td>Description</td>
            <td>CPU</td>
            <td>RAM</td>
            <td>Storage</td>
            <td>Camera</td>
            <td>Size</td>
            <td>Battery</td>
            <td>Price</td>
            <td>Img</td>
            <td></td>
          </TableHead>
          {showPhones}
        </Table>

        <form>
          
        </form>
        </AdminContainer>
      </>
  )
}
export default AdminMain

编辑第一种方式：

const EditItem = ({edit,editItem}) => {
  const [item,setItem] = useState({
    series: editItem.series,model: editItem.model,description: editItem.description,cpu: editItem.cpu,ram: editItem.ram,storage: editItem.storage,camera: editItem.camera,size: editItem.size,battery: editItem.battery,price: editItem.price,img:  editItem.img
  })
// in this item state value in input is not displaying

console.log(editItem,'editItem')
  const sendItem = () => {
    console.log(item)
    axios.put(`/api/phones/${editItem._id}`,item)
  }
console.log(item,'item in edit')
  return (
    <>
    {edit && (
      <AddItemContainer>
        <FormAdd autoComplete="off" onSubmit={sendItem}>
          <FormRow>
            <FormLabel htmlFor="series">Series:</FormLabel>
            <FormInput
              name="series"
              label="series"
              type="text"
              fullWith
              value={item.series}
              onChange={(e) => setItem({ ...item,series: e.target.value })}
            />
          </FormRow>

第二种方式编辑（从reducer中查找项目）

const EditItem = ({edit,editItem}) => {
   //editItem -> phone._id from main site
  const [{adminPhones},setPhones] = useState([])
  const [item,setItem] = useState([{
    series: '',model: '',description: '',cpu: '',ram: '',storage: '',camera: '',size: '',battery: '',price: '',img:  ''
  }])

console.log(editItem,'editItem')

useEffect(() => {
  const selectedItem = adminPhones.find(item => item._id === editItem)
  setItem(selectedItem)
  console.log(selectedItem,'selected Item in effect')
  //console.log(selectedItem.series,'selected Item series in effect')
  console.log(item,'item in effect')
},[editItem])
  const sendItem = () => {
    console.log(item)
    axios.put(`/api/phones/${editItem._id}`,'item in edit')
  return (
    <>
    {edit && (
      <AddItemContainer>
        <FormAdd autoComplete="off" onSubmit={sendItem}>
          <FormRow>
            <FormLabel htmlFor="series">Series:</FormLabel>
            <FormInput
              name="series"
              type="text"
              fullWith
              value={item.series}
              onChange={(e) => setItem({ ...item,series: e.target.value })}
            />
          </FormRow>