我有一個 SchoolsList 組件的以下代碼：
import { useSelector } from "react-redux"
import ClassesList from "../classes/ClassesList"
const SchoolsList = () => {
const schools = useSelector(selectAllSchools)
if (schools.length === 0) {
return <h2>No schools created yet</h2>
}
let selectedSchool = schools[0]
const handleChange = (e) => {
selectedSchool = schools[e.target.value]
document.getElementById("schoolName").innerText = "Name: " selectedSchool.name
}
return (
<div className='SchoolsList'>
<select onChange={handleChange}>
{schools.map((school, id) => <option key={id} value={id}>{school.name}</option>)}
</select>
<h3>Selected school</h3>
<h4 id="schoolName">Name: {selectedSchool.name}</h4>
<ClassesList classes={selectedSchool.classes} />
</div>
)
}
export default SchoolsList
當 select 的值發生變化并且變數 selectedSchool 發生變化時，ClassesList 組件屬性不會更新。我對 react-reduce 還很陌生，所以我有點不知道該怎么做。選擇更改時如何更新道具的值？
uj5u.com熱心網友回復：
您的變數selectedSchool不是反應性的，您可以使用鉤子useState，它將在道具中更新狀態。例子：
const [setSelectedSchool, selectedSchool] = useState(schools[0]);
const handleChange = (e) => {
setSelectedSchool(schools[e.target.value])
}
你也不需要這樣做，這document.getElementById("schoolName").innerText = "Name: " selectedSchool.name是不正確的。
你已經有正確的<h4 id="schoolName">Name: {selectedSchool.name}</h4>JSX
uj5u.com熱心網友回復：
這是沒有重新渲染發生。嘗試使用 useState 或 useRef 掛鉤來存盤所選學校的值。
const [state, setState] = useState({
selectedSchool:''
})然后將所選學校的值保存在州內。使用 useEffect 以您選擇的學校的初始值設定狀態。
useEffect(()=>{
setState({...state, selectedSchool:schools[0]})
},[])轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415577.html
標籤：