将 prop 设置为 useState 钩子的默认值 ReactJS

Question

I am building a blog with React and MaterialUI that includes a page where all of the posts are displayed. My goal is to be able to click a button to open the "editor mode". I have the buttons working and the editor mode opens successfully. When the edior opens, the user has the option of editing the title, the image url and the category. If the user enters edit mode I would like the text field to populate the current post's title. Once the title is edited, I would like to save that to a JSON file using the PUT method. Right now, however, my goal is just to set the title to a useState variable.

const [title, setTitle] = useState('');

<TextField label="Post title" variant="outlined" value={post.title} onChange={(e) => setTitle(e.target.value)} fullWidth required />

Right now the value of {post.title} populates the text field, but the useState hook does not update with new data (if changed) after clicking the submit button. I know that the value of the text field must be the state value title, but that does not set the text field to the current value.

Is there a way to set the default state to the value of {post.title} to the text field? If not, is there another way to do this?

Answer 1

you are hard coding the value and it doesn't change because post.title never changes. you should define your state like this

const [title, setTitle] = useState(post.title);

and pass the title as the value of your input.