Неизвестное значение в React
У меня следующая проблема. Приведенный ниже код не работает должным образом. В первом журнале отображается правильное значение. например «Какое-то Имя». Но «SomeName» не отображается в тексте inputName.
Чтобы сделать информацию более читабельной, я упростил функцию.
function EditAboutModal(props) {
const [show, setShow] = useState(false);
console.info(props.data.Name);
const [Name, setName] = useState(props.data.Name);
function handleNameChange(e) {
setName(e.target.value);
}
return (
<>
<div className = "row mb-3">
<label htmlFor = "inputName" className = "col-sm-2 col-form-label">Name:</label>
<div className = "col-sm-10">
<input type = "text" className = "form-control" id = "inputName" value = {Name} onChange = {handleNameChange} />
</div>
</div>
</>
);
}
Я ожидаю, что useState установит переменную Name в props.data.Name.
В журнале правильно отображается, что для этой переменной существует значение, но в текстовом поле значение не отображается, и когда я регистрирую переменную Name, она отображается как неизвестная.
Ответы 2
Это может быть null или что-то еще в рендере первого компонента. Используйте useEffect, чтобы решить эту проблему:
useEffect(() => {
setName(props.data.Name);
}, [props.data.Name]);
const { useState } = React;
function EditAboutModal(props) {
const [show, setShow] = useState(false);
console.info(props.data.Name);
const [Name, setName] = useState(props.data.Name);
function handleNameChange(e) {
setName(e.target.value);
}
return (
<div>
<label>Name:</label>
<input type = "text" value = {Name} onChange = {handleNameChange} >
</input>
</div>
);
}
ReactDOM.createRoot(
document.getElementById("root")
).render(
<EditAboutModal data = {{Name:"Marzzy"}} />
);<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>Я предоставляю более простую версию вашего кода во фрагменте кода, как вы можете видеть, если вы передадите правильные реквизиты в EditAboutModal, это будет работать.
Просто помните, что, поскольку вы устанавливаете data.name в качестве начального значения в своем состоянии, если data.name изменяется в реквизитах после первой инициализации, оно не будет постоянно изменять входное значение, поскольку начальное значение устанавливается только один раз. Если вы хотите продолжать зеркально отображать изменения props.data.name, вам нужно добавить для этого useEffect и fource (что не рекомендуется, посмотрите это для получения дополнительной информации), но если вы хотите это сделать, неважно что, вот так:
function EditAboutModal(props) {
const [show, setShow] = useState(false);
console.info(props.data.Name);
const [Name, setName] = useState(props.data.Name);
function handleNameChange(e) {
setName(e.target.value);
}
useEffect(()=> {
setName(props.data.Name)
}, [props.data.Name])
return (
<div>
<label>Name:</label>
<input type = "text" value = {Name} onChange = {handleNameChange} >
</input>
</div>
);
}
Я не могу воспроизводить потомство.