javascript - 如何使用 React 钩子编辑帖子？这是我学习 react.js 的最大挑战

Question

我已经尝试了我能想象的一切，但最后，编辑功能将执行创建功能。

我知道编辑需要两个部分，获取初始值和实际编辑它。

如果有人能让我理解如何在反应中编辑项目，那会让我非常非常开心！

我想要实现的是能够单击编辑按钮，该字段将填充我希望编辑的当前数据。当我单击提交按钮时，它将保存更改并返回编辑后的版本。但是发生的事情是提交按钮正在创建一个新数据，该数据具有给定的编辑值。

请这里是我的问题的代码示例。

I passed the initial state from the detail component.

import React, { useState } from 'react'
import {connect} from 'react-redux'
import {deleteGame} from '../action/gameActions'
import {Link} from 'react-router-dom'
import GameForm from './GameForm'

function GameDetails({game, deleteGame}) {
  
  const {_id, title, imageUrl} = game

  const [isEditing, setIsEditing] = useState(false)

  if(isEditing) {
    return (
      <div>
        <GameForm
        id={_id}
        title={title}
        imageUrl={imageUrl}
        setIsEditing={setIsEditing}
        />
      </div>
    )
  
  } else {
    return (
      <div className="container" >
        <h3>{title}</h3>
         <h4>{imageUrl}</h4>
         <button onClick={()=>deleteGame(_id)}>Delete</button>
         
           <button onClick={()=>setIsEditing(true)}>Edit</button>
        
      </div>
    )
  }
  
}

export default connect(null, {deleteGame})(GameDetails)

I used Form component for editing and creating data

import React, { useEffect, useState } from 'react'
import {connect} from 'react-redux'
import {createGame, gameEdit} from '../action/gameActions'


function GameForm({ createGame, gameEdit, setIsEditing, _id, title, imageUrl}) {

  
  const [game_, setGame] = useState({
    id : _id || '',
    title : title || '',
    imageUrl : imageUrl || '',
    errors : ''
  })

  const handleChange = (e) => {
    setGame({
      ...game_,
      [e.target.name] : e.target.value
    })
  }

  const handleSubmit = e => {
    e.preventDefault()
    let error = ''
    const {title, imageUrl, id} = game_
    if(!title || !imageUrl) {
      error = 'Input can\'t be empty'
      setGame({errors: error}) 
      return
    }
    const newGame = {
      
      id,
      title,
      imageUrl 
    }

    if(id){
      gameEdit(_id, newGame)
      setIsEditing(false)
    }
    else {
      createGame(newGame)
    setGame({
      title : '',
      imageUrl : ''
    })
    }
    
  }

  

  return (
    <div className="container">
      {
        game_.errors && <h4>{game_.errors}</h4>
      }
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Enter Title" name="title" value={game_.title} onChange={handleChange} />
        <input type="text" placeholder="Enter Image Url" name="imageUrl" value={game_.imageUrl} onChange={handleChange} />
    <button>{game_.id?(<h4>Edit</h4>):(<h4>Create</h4>)}</button>
      </form>
    </div>
  )
}

export default connect(null, {createGame, gameEdit})(GameForm)

Redux Action

export const gameEdit = (id, game) => dispatch => {
  const req = {
    method : "DELETE",
    headers : {"Content-Type":"application/json"},
    body : JSON.stringify(game)
  }
 
  fetch(`http://127.0.0.1:8000/game/${id}`, req)
   .then(res => res.json())
   .then(data=>dispatch({
     type : GAME_EDIT,
     payload : game
   }))
}

Redux Reducer

import {GAME_DELETE, GAME_EDIT, GAME_ITEM, GAME_LIST, GAME_CREATE} from '../action/types'

const initialState = {
  games : []
}

export default function(state=initialState, action){
switch (action.type) {
  case GAME_LIST:
    return{
      ...state,
      games : action.payload
    }

  case GAME_EDIT:
    
    return{
      ...state,
      games : state.games.map(game => game._id === action.payload._id ? action.payload : game)
    }  

  case GAME_CREATE:
    return{
      ...state,
      games : [action.payload, ...state.games]
    }  

  case GAME_DELETE:
    return {
      ...state,
      games : state.games.filter(game => game._id != action.payload)
    }  
    

  default:
    return state
}
}
  

标签： javascriptreactjs