反應：輸入欄位不更新文本-有解無憂

我希望能夠在輸入欄位中寫入文本，并且應該更改 h3 標記中的文本，我有三個輸入欄位并賦予它們“onChange”屬性，并且 onChange 正在使用更新的值更新狀態并提交它觸發了我在父（App.js）組件中宣告的回呼函式“updateEmployee”。在這個回呼函式中，我復制了值并用更新的值覆寫了相應的鍵。但它的行為不像預期的那樣。知道我哪里錯了嗎？？？

const App = ()=>{
  const [state, setState] = useState([{
    id:1,
    name:'Name1',
    role: 'Role1'
  },{
    id:2,
    name:'Name2',
    role:"Role2"
  },{
    id:3,
    name:'Name3',
    role:"Role3"
  }                        
  ])
  

  
  function updateEmployee (id,newName){
    console.log('Hello from function updateEmployee')
  
    const checkingEmployees = state.map((item)=>{
      if(id==item.id){

        return {...state, name:newName}
      }

      return state;
    })
  setState(checkingEmployees);
  }
  
  return (
  <div>
{state.map(data=>(
  <Employee 
    name={data.name} 
    id={data.id}
    key={data.id}
    updateEmployee={updateEmployee}
    />
))}
  </div>
  )
}    
      
function Employee({name,id,updateEmployee}){
  return(
  <div>
      <h3><u>{name}</u></h3>
      
      <EditEmployee 
        name={name} 
        id={id}
        updateEmployee = {updateEmployee}
        />
      </div>
  )
}      
      
function EditEmployee({name,role,id,updateEmployee}){
  const [state2,setState2] = useState(name);


function finalize(e){
 e.preventDefault();
  console.log(id,name);
  updateEmployee(id,state2)
  
}
  
  return (
  <div>
      <form onSubmit = {finalize}>
      <input 
   
       type="text"
        value={state2}
        onChange={(e)=>{setState2(e.target.value)}}
        />
    
      <button>Update</button>
      </form>
  </div>
  )
}

這是 Codepen 鏈接

謝謝你

uj5u.com熱心網友回復：

在updateEmployee函式中，您正在傳播整個的值state，這需要是item.

function updateEmployee(id, newName){
  console.log('Hello from function updateEmployee')
  
  const checkingEmployees = state.map((item) => {
    if (id == item.id){
      return { ...item, name: newName } // <-- here
    }
    return item; // <-- here
  })

  setState(checkingEmployees);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/514819.html

標籤：javascript反应

上一篇：將道具傳遞給給定組件的道具反應

下一篇：同步JSONuseEffect