如何在子组件中使用useState

Question

我不知道为什么我不能使用我的传递useState从父组件<AppMain />到子组件<GroupPage />和<CreateGroupForm />

我想做什么:

我正在研究一个更新功能，在单击<GroupPage />中的编辑按钮时，我希望groupage的内容填充<CreateGroupForm />的表单字段。因此，我在<AppMain />中创建了状态currentId和setCurrentId，因为它是两者的父组件，我可以将这些传递给它的子组件，假设它们都共享状态。

const AppMain = () => {
const [ currentId, setCurrentId ] = useState(null)
return (
<div>
<Switch>
<Route path="/groupMain" exact> <GroupMain /> </Route>
<Route path="/groupMain/:id" exact> <GroupPage setCurrentId={setCurrentId} /> </Route>
<Route path="/createGroup" exact> <CreateGroupForm currentId={currentId} setCurrentId={setCurrentId} /> </Route>
</Switch>
</div>
)
}
export default AppMain

const GroupPage = ({setCurrentId}) => {
const { group } = useSelector((state) => state.groups)

// the reason for this condition is to prevent rendering something before data is actually fetched
if(!group) return null

return (
<div>
<EditButton onClick= {() => {
setCurrentId(group._id)
history.push(`/createGroup/`)
}} />
<h1>{group.groupName}</h1>
</div>
)
}
export default GroupPage

现在当点击<GroupPage />的编辑按钮时，我在setCurrentId中设置当前组Id并将其定向到<CreateGroupForm />。在<CreateGroupForm />中，我正在检查currentId是否与已经存在的组匹配。通过useEffect，我将这些值填充到表单字段中。

const CreateGroupForm = ({currentId, setCurrentId}) => {
const [groupData, setGroupData] = useState({
groupName: ''
})
const group = useSelector((state) => currentId ? state.groups.groups.find((grp) => grp._id === currentId) : null)
console.log(group) // null
console.log(currentId) // undefined
useEffect(() => {
if(group) setGroupData(group)
}, [group])
return (
<div>
<MainForm>
<form autoComplete="off" onSubmit={handleSubmit}>
<h1>{ currentId ? 'Editing' : 'Creating'} a Group:</h1>
<label htmlFor="Group Name">Your Group Namee: </label>
<input type="text" value={groupData.groupName} onChange={(e) => setGroupData({ ...groupData, groupName: e.target.value })} />
<button type="submit">Submit</button>
</form>
</MainForm>
</div>
)
}
export default CreateGroupForm

发生了什么:

单击Edit按钮时，表单字段不会填充组内容。

请帮忙将不胜感激。

Answer 1

在它的子元素之间传递setStates不是一个好的做法。我建议您在appMain中创建回调函数，并将该函数传递给groupage和CreateGroupForm组件。当你在组件中调用这些函数时，你的函数会在appMain中改变你的currentIdState。在你的appMain中改变currentId的状态，组件将接收到currentId的新状态