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

Question

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

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

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

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

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} />
  )
}