我正在制作一個小型 React 應用程式來跟蹤家庭作業。您應該能夠添加多個日期，并在這些日期內添加多個分配。我可以將日期列印到螢屏上，也可以列印一天的多個作業。但是，在添加另一個日期后，存盤所有先前日期中的分配的本地狀態將被清除，因此每個日期的分配都消失了。所有日期仍然顯示在螢屏上，但其中的分配不再存在且不再處于狀態。添加新日期時，如何讓作業保持在螢屏上并保持狀態？這是我需要本地存盤的東西嗎？我很感激我能得到的任何幫助。下面是我的代碼：
import Button from './Button';
import DatesInput from './DatesInput';
import DatesDisplay from './DatesDisplay';
const AssignmentCalendar = () => {
const [dates, setDates] = useState([]);
const addDate = (date) => {
setDates(dates.concat(date))
}
return (
<main className="main-display">
<h3>Assignment Calendar</h3>
<h4 className="dates-Title">Dates</h4>
<Button
text='Add Date'
color='green'
/>
<DatesInput dates={dates} addDate={addDate}/>
<DatesDisplay dates={dates} />
</main>
)
}
export default AssignmentCalendar
import React, { useState } from 'react'
import Button from './Button'
const DatesInput = ({ addDate }) => {
const [ date, setDate ] = useState('')
const typeInDate = (e) => {
setDate(e.target.value)
}
const submitDate = (e) => {
e.preventDefault();
addDate(date)
setDate('')
}
return (
<form className='dates-input' onSubmit={submitDate}>
<label className='input-label'>Please enter a new date...</label>
<input type='text' value={date} onChange={typeInDate} ></input>
<Button text='Submit' />
</form>
)
}
export default DatesInput
import React from 'react'
import Date from './Date';
import { v4 as uuidv4 } from 'uuid';
const DatesDisplay = ({ dates }) => {
return (
<div className='assignment-display'>
{dates.map((date) => {
return (
<div key={uuidv4()}>
<Date date={date}/>
</div>
)
})}
</div>
)
}
export default DatesDisplay
import React, { useState } from 'react';
import Assignments from './Assignments';
import Button from './Button';
const Date = ({ date }) => {
const [assignments, setAssignments] = useState([]);
const addAssignment = (assignment) => {
setAssignments(assignments.concat(assignment))
}
return (
<div>
<h5>{date} <Button text='Add Assignment'/></h5>
<div className='assignment-display'>
<Assignments assignments={assignments} addAssignment={addAssignment} />
</div>
</div>
)
}
export default Date
import React from 'react'
import AssignmentInput from './AssignmentInput';
import AssignmentDisplay from './AssignmentDisplay';
const Assignments = ({ assignments, addAssignment }) => {
return (
<div>
<AssignmentInput addAssignment={addAssignment} />
<AssignmentDisplay assignments={assignments} />
</div>
)
}
export default Assignments
import React, { useState } from 'react'
import Button from './Button';
const AssignmentInput = ({ addAssignment }) => {
const [assignment, setAssignment] = useState({
name: '',
subject: '',
});
const handleAddName = (e) => {
setAssignment({
name: e.target.value,
subject: assignment.subject,
})
}
const handleAddsubject = (e) => {
setAssignment({
name: assignment.name,
subject: e.target.value,
})
}
const submitNewAssignment = (e) => {
e.preventDefault();
addAssignment(assignment);
setAssignment({
name: '',
subject: '',
});
}
return (
<form onSubmit={submitNewAssignment}>
<label>Please enter a new assignment...</label>
<input type='text' placeholder='Assignment name' value={assignment.name} onChange={handleAddName}></input>
<input type='text' placeholder='Subject' value={assignment.subject} onChange={handleAddsubject}></input>
<Button text='Submit' />
</form>
)
}
export default AssignmentInput
import React from 'react'
import { v4 as uuidv4 } from 'uuid';
import Assignment from './Assignment';
const AssignmentDisplay = ({ assignments }) => {
return (
<div>
{assignments.map((assignment) => {
return (
<div key={uuidv4()}>
<Assignment name={assignment.name} subject={assignment.subject}/>
</div>
)
})}
</div>
)
}
export default AssignmentDisplay
import React from 'react'
import { FaTimes, FaCheckCircle } from 'react-icons/fa'
const Assignment = ({ name, subject }) => {
return (
<div>
<FaCheckCircle style={{color: 'green', cursor: 'pointer'}} />
<h6 className='assignment-names'>
{name}
<FaTimes
style={{color: 'red', cursor: 'pointer'}}
/>
</h6>
<p className='assignment-date'>
{subject}
</p>
</div>
)
}
export default Assignment
uj5u.com熱心網友回復：
問題
當您為每個元素生成新的 GUID 時，您實際上Date是在為每個被映射的組件使用一個隨機的 React 密鑰DateDisplay。
const DatesDisplay = ({ dates }) => {
return (
<div className='assignment-display'>
{dates.map((date) => {
return (
<div key={uuidv4()}> // <-- new unique key each render
<Date date={date}/>
</div>
)
})}
</div>
)
}
如果每個元素的 React 鍵在渲染之間不穩定，那么 React 會將其解釋為一個新組件并卸載之前的“實體”并安裝一個新的“實體”，從而丟棄任何組件狀態。
解決方案
一個理想的解決方案可能是將賦值陣列存盤在組件的dates狀態陣列中AssignmentCalendar，但要專門解決這個問題，您只需要為狀態中的每個date元素提供穩定的 React 鍵dates。為此，我建議AssignmentCalendar在將新日期添加到狀態時將 GUID 生成移動到組件中。
const AssignmentCalendar = () => {
const [dates, setDates] = useState([]);
const addDate = (date) => {
setDates(dates.concat({
id: uuidv4(), // <-- generate GUID id property
date,
}));
};
return (
<main className="main-display">
<h3>Assignment Calendar</h3>
<h4 className="dates-Title">Dates</h4>
<button type="button">Add Date</button>
<DatesInput dates={dates} addDate={addDate} />
<DatesDisplay dates={dates} />
</main>
);
};
映射時解構dateand idin DatesDisplay，id仍然使用 the作為 React 鍵。
const DatesDisplay = ({ dates }) => {
return (
<div className="assignment-display">
{dates.map(({ date, id }) => (
<div key={id}> // <-- now a stable id
<Date date={date} />
</div>
))}
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338066.html
上一篇：影片不適用于React組件