如何在子组件中使用 useState

Question

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

我正在尝试做的事情：

我正在开发更新功能，在单击<GroupPage /> 中的编辑按钮时，我希望 GroupPage 的内容填写在<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

发生了什么：

单击“编辑”按钮时，表单字段未填充组内容。

如有任何帮助，我们将不胜感激。

Answer 1

在其子级之间传递 setStates 不是一个好习惯。我建议您在 appMain 中创建回调函数，并将该函数传递给您的 GroupPage 和 CreateGroupForm 组件。当您在组件中调用这些函数时，您的函数将更改 appMain 中的 currentIdState。更改 appMain 中 currentId 的状态，组件将接收 currentId 的新状态