select 值更改时组件属性不会更改

Question

我有以下 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 还很陌生，所以我有点不知道该怎么做。 select 改变时如何更新 prop 的值？

Answer 1

你的变量 selectedSchool 不是响应式的，你可以使用 hook useState 并且它会在 props 中更新状态。示例：

    const [setSelectedSchool, selectedSchool] = useState(schools[0]);
    const handleChange = (e) => {
          setSelectedSchool(schools[e.target.value])
    }

你也不需要这样做document.getElementById("schoolName").innerText = "Name: " + selectedSchool.name这是不正确的。

您已经拥有正确的 JSX <h4 id="schoolName">Name: {selectedSchool.name}</h4>

Answer 2

这是没有重新渲染的情况。尝试使用 useState 或 useRef 挂钩来存储所选学校的值。

const [state, setState] = useState({
    selectedSchool:''
})

然后将所选学校的值保存在州内。使用 useEffect 将状态设置为您选择的学校的初始值。

useEffect(()=>{
    setState({...state, selectedSchool:schools[0]})
},[])

select 值更改时组件属性不会更改

Component prop not changing when select value changes

reactjs

react-redux