为什么更新状态时不会填充模态输入值？

Question

我有一个在单击按钮时触发的模式，需要用用户可以编辑的输入值填充。当按钮被点击时，模态状态被更新，但是输入是：

一个。没有将更新后的状态反映为它的值（当我使用 'defaultValue' 时会发生这种情况 --或者--

b。不会让用户编辑输入中的值（当我使用 'value' 时会发生这种情况。

如何使用当前状态填充输入并能够对其进行编辑？不应该改变输入值设置的状态来触发模态的重新渲染吗？

function EditModal(props) {
    const [value, setValue] = useState(props.modalVal);
    const[hidden, setHidden] = useState(true)
    const[initialRender, setInitialRender] = useState(true)
    useEffect(()=>{
        setInitialRender(false)
    },[])
    useEffect(() => {
        setValue(props.modalVal)// <-- why doesn't this update input value?
    }, [props.modalVal]);
    useEffect(()=>{
        if(!initialRender){
            setHidden(false)
        }
    },[value])
    return (
        <Modal hidden={hidden} >
            <Text>Edit Item</Text>
            <form action="submit" onSubmit={props.submit}>
                <Input onChange={props.handleChange} defaultValue={value} />
                <Button>OK</Button>
            </form>
        </Modal>
    )
}

Answer 1

如果您使用 value 设置该值，那么当用户编辑它时，您需要确保您指定的 onChange 函数更新该值，以便在下一次渲染时，该值为已更新。

您似乎有一个值 (props.modalVal)，您应该将其用作 value（请注意，您不需要 useEffect 或 useState这个，因为改变道具会导致重新渲染）。因此，您需要确保 props.handleChange 更改 modalValue

像这样：

<Input onChange={props.handleChange} value={props.modalValue} />

并且在父组件中：

const ParentComponent = ()=> {
  const [modalValue, setModalValue] = useState('initialValue');

  const handleChange = (event) => {
    setModalValue(event.currentTarget.value);
  };

  return (
    <EditModal handleChange={handleChange} modalValue={modalValue} />
  )
}

为什么更新状态时不会填充模态输入值？

Why won't react modal input value populate when state is updated?

reactjs

react-hooks

use-effect

use-state