Javascript onclick 更改所有映射的项目，而不仅仅是一个

我有一个问题，我试图点击某个由我的后端返回的div并更新它.我正在try 设置它，这样你点击编辑，博客标题和博客正文就会变成输入栏，你可以在其中输入新标题和新正文.在我的代码中，你可以看到一个有效的更新和一个无效的更新.问题是，当我点击编辑时，所有blogBody和blogTitle都变成了输入栏，而不是一个.

第video期的这5秒可能比我的解释更有意义.

在我的代码中，这主要涉及以下内容:

<div style={{display : 'flex', flexDirection: 'column-reverse'}}>
    { getBasic.miscData.map(({blogBody, blogTitle, _id}, i) => {
        return(
      <div key={i} >
        <p>{i}</p>
        {prompt ? <p>{blogBody}</p> : <input  onChange={handleChange} name='newerValue' value={Item.newerValue}  placeholder='new title'></input>}
        {prompt ? <p>{blogTitle}</p> : <input  onChange={handleChange} name='newerValue2' value={Item.newerValue2}  placeholder='new title'></input>}
        <p>{blogTitle}</p>
        <p>{_id}</p>

        <button onClick={deleteOne} value={_id}>Delete</button>

        {prompt ? <button onClick={() => { setPrompt(!prompt)}} >Edit</button> : <button onClick={() => { setPrompt(!prompt)}} >Submit</button>}
        
      </div>

以下是完整的代码:

import './App.css';
import axios from 'axios';
import React, { useState, useEffect } from 'react'

function App() {

  const [getBasic, setGetBasic] = useState()
 
  const [Item, setItem] = useState(
    {
      title: '',
      description: '',
      id: '',
      newValue: '',
      newValue2: '',
      newerValue: '',
      newerValue2: '',
      previousValue: ''
    }
  )

  const [prompt, setPrompt] = useState(true)




  async function fetchData() {
    await axios.get('http://localhost:3001/api')
    .then(result => setGetBasic(result.data))

  }



  function handleChange(event) {
    let {name, value} = event.target;
    setItem(prevInput => {
      return(
        {
          ...prevInput,
          [name]: value,
        }
      );
    });
    // console.log(Item);
  }



  //delete
  function deleteOne(event) {
    event.preventDefault();
    const aValue = event.target.value;
    const deleteItem = {
      // id: Item.id
      id: aValue
    }
    console.log(deleteItem)

    axios.post('http://localhost:3001/api/delete', deleteItem);
    window.location.reload();
    // console.log(deleteItem)

  }


  function updateOne(event) {
    event.preventDefault();
    const updatedItem = {
      previousValue: Item.previousValue,
      newValue: Item.newValue,
      newValue2: Item.newValue2
    }
    console.log(updatedItem)

    axios.put('http://localhost:3001/api/update', updatedItem);
    window.location.reload();
    // console.log(deleteItem)


  }






  useEffect(() => {
    fetchData()
  }, [])

  if (getBasic) {
  
  return (
    <div className="App">
      



      <br />
      {/* A version of update that works */}
      <input  onChange={handleChange} name="previousValue" value={Item.previousValue} placeholder="old value id" />
      <input  onChange={handleChange} name='newValue' value={Item.newValue}  placeholder='new title'></input>
      <input  onChange={handleChange} name='newValue2' value={Item.newValue2}  placeholder='new body'></input>
      <button onClick={updateOne} >update</button>


      {/* A version of update that does not work*/}
    <div style={{display : 'flex', flexDirection: 'column-reverse'}}>
    { getBasic.miscData.map(({blogBody, blogTitle, _id}, i) => {
        return(
      <div key={i} >
        <p>{i}</p>
        {prompt ? <p>{blogBody}</p> : <input  onChange={handleChange} name='newerValue' value={Item.newerValue}  placeholder='new title'></input>}
        {prompt ? <p>{blogTitle}</p> : <input  onChange={handleChange} name='newerValue2' value={Item.newerValue2}  placeholder='new title'></input>}
        <p>{blogTitle}</p>
        <p>{_id}</p>

        <button onClick={deleteOne} value={_id}>Delete</button>

        {prompt ? <button onClick={() => { setPrompt(!prompt)}} >Edit</button> : <button onClick={() => { setPrompt(!prompt)}} >Submit</button>}
        
      </div>
      )})}
      </div>
    
     
    </div>
  )} else {
    return (
      <div>
        <h1>Loading</h1>
        
      </div>
    )
  };
}

export default App;

现在我明白了为什么它会这样做，我只是无法思考让我的编辑按钮一次只编辑一个按钮的逻辑.此外，我明白一旦我解决了这个问题，更新将无法工作，我正在try 解决这个问题，即在设置另一个更新之前，先一次编辑1.

编辑:到目前为止，我收到了一个不喜欢的 comments ，我重新阅读了这篇文章，并意识到它缺乏一点重点，因此代码更简单:

import './App.css';
import axios from 'axios';
import React, { useState, useEffect } from 'react'

function App() {

  const [getBasic, setGetBasic] = useState()
 
  const [Item, setItem] = useState(
    {
      title: '',
      description: '',
      id: '',
      newerValue: '',
      newerValue2: '',
      previousValue: ''
    }
  )

  const [prompt, setPrompt] = useState(true)



  async function fetchData() {
    await axios.get('http://localhost:3001/api')
    .then(result => setGetBasic(result.data))
    console.log(getBasic)
  }



  useEffect(() => {
    fetchData()
  }, [])

  if (getBasic) {
  
  return (
    <div className="App">

    <div style={{display : 'flex', flexDirection: 'column-reverse'}}>
    { getBasic.miscData.map(({blogBody, blogTitle, _id}, i) => {
        return(
      <div key={i} >
        <p>{i}</p>
        {prompt ? <p>{blogBody}</p> : <input  ></input>}
        {prompt ? <p>{blogTitle}</p> : <input ></input>}
        <p>{blogTitle}</p>
        <p>{_id}</p>


        {prompt ? <button onClick={() => { setPrompt(!prompt)}} >Edit</button> : <button onClick={() => { setPrompt(!prompt)}} >Submit</button>}
        
      </div>
      )})}
      </div>
    
     
    </div>
  )} else {
    return (
      <div>
        <h1>Loading</h1>
        
      </div>
    )
  };
}

export default App;

这就是解决当前问题所需的全部工作，即一次编辑一个，而不是全部编辑.留下op作为参考.