Блог

На этой странице написано «Единственный аргумент для useState() Hook — это начальное состояние.»

Я интерпретирую это как означающее, что useState принимает один аргумент, и этот аргумент является начальным состоянием. Это кажется неправильным, поэтому мой вопрос в том, как мне установить начальное значение переменной состояния? В следующей строке кода message всегда есть пустая строка, даже если я устанавливаю для нее допустимое строковое значение.

 const [message, setMessage] = useState(props.message);
  

В моем диалоговом окне хост-компонент передает строку ( props.message ). Я хочу присвоить эту строку переменной состояния ( message ), а затем назначить message пустую строку, когда пользователь захочет закрыть диалоговое окно.

Dialog.tsx

 function Dialog(props: any) {
    var dummy = props.message;                                 // "foo"
    const [message, setMessage] = useState(props.message);     // set initial state     
    dummy = message;                                           // "" - expected "foo"

    const handleClose = () => setMessage('');

    return (
        <>
            <Modal show={message.length > 1} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Information</Modal.Title>
                </Modal.Header>
                <Modal.Body>{message}</Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" onClick={handleClose}>
                        Ok
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}