我試圖用我的動作創建者中 axios 呼叫的結果填充表單中的選擇串列下拉串列。該呼叫在我的 redux 存盤中填充一個（子）物件，然后用于填充串列。它作業正常，但我無法獲取默認串列項的值，即未觸發 onchange 事件時串列項的值。
目前，由 selectedProject 控制的 value 屬性似乎根本沒有影響。IE selectedProject 仍然是一個空字串，但選擇串列中的第一項是 redux 存盤中的第一項。
如果用戶點擊下拉選單并觸發 onChange ，它作業正常，但是會有很多情況下用戶選擇默認值。我怎么才能得到它？
非常感謝閱讀！
到目前為止，我的代碼是：
const { projects, newProject } = useSelector((state) => state.project)
const [selectedProject, setSelectedProject] = useState('')
useEffect(() => {
dispatch(getProjects())
}, [dispatch])
const handleNavigate = (e) => {
e.preventDefault()
navigate(`/project/${selectedProject}`)
}
return (
<>
{projects && (
<>
<form onSubmit={handleNavigate}>
<select
name='projects'
id='project-list'
onChange={(e) => setSelectedProject(e.target.value)}
value={selectedProject}
>
{projects.map((project) => (
<option key={project._id} value={project.title}>
{project.title}
</option>
))}
</select>
<button>Go!</button>
</form>
</>
)}
</>)
uj5u.com熱心網友回復：
既然你的select輸入被selectedProject那個方式控制了，那么那個狀態的值是什么，那就是select輸入的值。在您的情況下， state 的初始值是一個空字串，這是事實上的值。
您期望 React 自動從projects串列中選擇第一個元素作為您的第一個值。這不是select元素和反應的作業方式。即使除了 React 之外，這也不是事情的運作方式。
看到這一點的正確方法是始終依賴于您為valueprop分配的狀態。這是您的代碼的更正版本：
const { projects, newProject } = useSelector((state) => state.project);
const [selectedProject, setSelectedProject] = useState('');
useEffect(() => {
dispatch(getProjects());
}, [dispatch]);
useEffect(() => {
if(projects && projects.length !== 0 && selectedProject !== '') {
setSelectedProject(projects[0].title)
}
}, [projects])
const handleNavigate = (e) => {
e.preventDefault();
navigate(`/project/${selectedProject}`);
};
在上面的代碼中，selectedProject當projects從 redux 中檢索狀態時，設定為陣列的第一個元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373318.html
標籤：javascript 反应
下一篇：如何為視頻添加動態字幕？