我是react的新手，我試著用 "setData "來獲取資料，然后用狀態變數 "data "來設定title、desc和author的值，但我得到的是undefined。在將初始狀態設定為空后，我將輸入欄位的值設定為我從 "data "狀態中得到的值，當我提交表單時，只有被修改的欄位被更新，其余的欄位都是 "未定義 "的值，即當我提交表單進行更新時，它看起來像這樣 {title:undefined,desc:undefined,author: "person1"}，我無法將初始狀態值設定為輸入欄位值。
EditBlog.js
import React, { useState, useEffect } from "react"。
import { useParams, useHistory } from "react-router-dom"
const EditBlog = (/span>) => {
const { id } = useParams()
useEffect(() => {
fetch('http://localhost:8000/values/'/span> id)
.then((res) =>/span> {
return res.json()
})
.then((data) =>/span> {
setData(data)
})
}, [id])
const [data, setData] = useState({})
const [title, setEditTitle] = useState()
const [desc, setEditDesc] = useState()
const [author, setEditAuthor] = useState()
const history = useHistory()
const updateHandler=（e）=> {
e.preventDefault()
const updatedBlog = { title, desc, author }
fetch('http://localhost:8000/values/'/span> id, {
method: "PUT"。
headers: {
"Content-Type": "application/json",
"接受": "application/json".
},
body: JSON.stringify(upedBlog)
})
.then(() => {
console.log(upedBlog)
history.push("/"/span>)
})
}
return (
<React.Fragment>
<div>
<h1>/span>編輯博客</h1>
< form onSubmit={updateHandler} className="new-blog">
<label>博客標題</label>/span>
<div className="input-box"/span>>
<input
onChange={(e) => setEditTitle(e.target.value)}。
type="text"
defaultValue={data.title}
className="inputField"
/>
</div>
<label>博客正文</label>
<div className="input-box"/span>>
<textarea。
onChange={(e) => setEditDesc(e.target.value)}.
cols="64"
defaultValue={data.desc}。
/>
</div>
<label>博客作者</label>/span>
<div className="input-box"/span>>
<input
onChange={(e) => setEditAuthor(e.target.value)}。
className="inputField"
type="text"
默認值={data.author}。
/>
</div>
<button>Save</button>
</form>/span>
</div>/span>
</React.Fragment>
)
}
export default EditBlog
uj5u.com熱心網友回復：
你試圖在狀態中保留同一資料的兩個副本，這讓你感到困惑。 把狀態縮減到只有你正在編輯的一個物件（并給它輸入的初始值，所以沒有什么是undefined）：
const [ data, setData] = useState({
title: ''/span>,
desc: '',
author: ''讓你的輸入使用并更新該狀態物件中的值：
<input
onChange={(e) => setData（{. .data, title: e.target.value}） }。
type="text"。
value={data.title}。
className="inputField">。
/>。
注意使用value={data.title}，所以輸入總是顯示當前值，以及新的onChange，它更新正在使用的同一個狀態，只是改變該狀態物件的一個值。
當你發布表單時，只需發布當前的狀態，而不是從單獨追蹤的值中建立一個新的物件：
body。JSON.stringify（資料）。
簡而言之，你不需要也不想要這些：
const [title, setEditTitle] = useState()
const [desc, setEditDesc] = useState()
const [author, setEditAuthor] = useState()
因為你已經在data中得到了你的資料。
uj5u.com熱心網友回復：
在useEffect中，在setData(data)之后的.then塊中添加以下代碼：
setEditTitle( data.title)
setEditDesc(data.description)
setEditAuthor( data.author)
然后將defaultValue={data.title}替換為value={title}，并以同樣的方法替換其他兩個。
注意: 我想說的是，最好的方法是避免為你的欄位使用states，因為你已經在useData中保存了state。你應該修改你的代碼以避免有三個不同的state鉤子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/332297.html
標籤：