React Hooks：单击按钮后如何填充模态组件？

Question

I coded a modal component: Modal that has this props:

interface IProps {
    isShowing: boolean,
    hide(): void,
    category: ICategory
}

This modal is a form that contains only one input:

const [name, setName] = useState(props.category.name)

// Other bunch of code.

const editCategory = (e: React.FormEvent) => {
        
        e.preventDefault()
        const editedCategory: ICategory = {
            id: props.category.id,
            name
        }
        // Dispatch Action...
        props.hide()
    }


<label>Category Name</label>
<input value={name} onChange={e => { setName(e.target.value) }} />

<button onClick={editCategory}>Edit Category</button>
<button onClick={props.hide}>Cancel</button>

The Parent component has

const {isShowing, toggle} = useEditModal()
const [category, setCategory] = useState<ICategory>({id: 0, name: ""})

const updateCategory = (item: ICategory) => {
        setCategory(item)
        toggle()
    }

// foreach to create the table and so on... 
<th> <button onClick={ () => { updateCategory(item) }}>Update category</button> </th>
// More code...
<ModalEditCategory isShowing={isShowing} hide={toggle} category={category} />

So everything runs as expected except that the form is not displaying the current state of the selected category. So:

const updateCategory = (item: ICategory) => {
        setCategory(item)
        toggle()
    }

The set category happens after i toggle the modal. I know that this is the correct and asynchronous way of setState hooks in React but, Is there a way to fill the form after i update the state?

I know that there is a hook called useeffect, but the i entered on a infinite loop trying to show the modal.

Thanks in advance.

Answer 1

useEffect is the best way to do this. However the "toggle" function would be a different object on every render, causing the useEffect to be triggered.

To prevent this, wrap the function "toggle" with a "useCallback" hook and then use it.

const toggleMemoized= useCallback(() => {
    toggle();
  }, []);