Question

我不确定钩子和上下文是否可以实现我想做的事情，但是我有多个组件，每个组件都有自己的带状态钩子实例，当选择了其中一个组件时，将其钩子放入上下文中。然后，我在侧面有一个控制面板组件，该组件在上下文中使用钩子，可让您使用文本字段编辑所选组件的值，从而更新组件的文本。所选组件的更新确实可以进行-但不会使用新的挂钩状态更新控制面板文本字段。我不确定挂钩是否仅将新状态推送到在其中创建的组件？如果是这样，我该如何解决？

    function useHook(policy) {
        const [id, setId] = useState(policy.id)

        const updateId(id) {
            setId(id)
        }

        return {id:id, setId:updateId}
    }

    function policyComponent(props) {
        const hook = useHook(props.policy)
        const context = useContext(Context)

        useEffect(()=> {
            console.log("PolicyComponent got new id: " + hook.id)
            // This works every time text is typed into control panel text box
        }, [hook.id])

        onClick() {
            context.setSelectedHook(hook)
        }

        return (
        <p>{hook.id}</p> 
        )
    }

    function controlPanelComponent(props) {
        const context = useContext(Context)
        const selectedHook = context.selectedHook

        useEffect(() => {
            console.log("ControlPanelComponent got new id: " + selectedHook.id)
            // Only works once for the initial value - not receiving any updated value
        }, [selectedHook.id])

        handleChange(e) {
            selectedHook.setId(e.target.value)
        }

        return (
            <input value={selectedHook.id} onChange={handleChange} />
            // Textfield value not updating because new state not being pushed to this component
        )
    }

除了在文本字段中键入并不能更新两个组件的状态外，所有内容似乎都可以正常工作。有人有什么想法吗？谢谢

如何在上下文中与状态共享React钩子实例以从另一个组件更新一个组件？

0 个答案: