Почему ввод ReactJs формы, предварительно заполненный значением при загрузке, больше не позволяет обновлять его - PullRequest
Новая
       66

Почему ввод ReactJs формы, предварительно заполненный значением при загрузке, больше не позволяет обновлять его

0 голосов
/ 01 марта 2020

Я использую форму, которая должна позволять пользователю обновлять содержимое данных, которые уже были сохранены. Позже я загружаю существующие данные в форму ввода следующим образом: - 

  <input value={profile.displayName} 
  name="displayName" type="text" 
  placeholder="Display Name" 
  /> // it dosn't work  So I tried next

  <input value={profile.displayName} 
  name="displayName" type="text" 
  placeholder="Display Name" 
  onChange={(e) => {setDisplayName(e.target.value )}}/> // Same issue

Итак, как мне загрузить существующие данные, и данные должны быть редактируемыми в from?

Дополнительный код для уточнения: - Я использую такие крючки: - 

const [profile, setProfile] = useState({});

useEffect(() => {

if (props.match.params.title) {
  setTitle(props.match.params.title);
} else if (props.location.state.title) {
  setTitle(props.location.state.title);
}

if (props.location.state) {
  if (props.location.state.profile) {
    setProfile(props.location.state.profile)
    console.warn("profile: ", props.location.state.profile)
  }
}

}

Таким образом, профиль поступает как подпорки от другой компонент. Эта часть в порядке. Также загрузка данных в форму в порядке. Но после загрузки данных я больше не могу их редактировать.

Ответы [ 2 ]

0 голосов
/ 01 марта 2020

Вы устанавливаете начальный профиль для пустого объекта, но присваиваете значение по умолчанию для входа profile.displayName, равное undefined, и в ответ выдается следующее предупреждение.

Предупреждение. Компонент изменяет неконтролируемый ввод текста типа для управления. Элементы ввода не должны переключаться с неконтролируемого на управляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого входного элемента в течение срока службы компонента. *

Ваш начальный объект должен быть похож на 

const [profile, setProfile] = useState({
  displayName: ""
});

Затем обновите значение как 

<input
  value={profile.displayName}
  name="displayName"
  type="text"
  onChange={e => {
    setProfile({ ...profile, displayName: e.target.value });
  }}
/>


// Get a hook function
const {useState, useEffect} = React;

function App() {
  const [profile, setProfile] = useState({
    displayName: "",
    gender: "",
    occupation: ""
  });

  useEffect(() => {
    setProfile({
      displayName: "StackOverflow",
      gender: "Male",
      occupation: "Software Eng."
    });
  }, []);

  return (
    <div>
      <input
        value={profile.displayName}
        name="displayName"
        type="text"
        onChange={e => {
          setProfile({ ...profile, [e.target.name]: e.target.value });
        }}
      />
      <input
        value={profile.gender}
        name="gender"
        type="text"
        onChange={e => {
          setProfile({ ...profile, [e.target.name]: e.target.value });
        }}
      />

      <input
        value={profile.occupation}
        name="occupation"
        type="text"
        onChange={e => {
          setProfile({ ...profile, [e.target.name]: e.target.value });
        }}
      />

      <p>display name: {profile.displayName}</p>
      <p>gender: {profile.gender}</p>
      <p>occupation: {profile.occupation}</p>
    </div>
  );
}
// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
0 голосов
/ 01 марта 2020

Предполагая, что у вас есть хук, как показано ниже 

const [displayName, setDisplayName] = useState('');

При использовании эффекта, когда вы устанавливаете профиль, также задайте отображаемое имя. 

setDisplayName(props.location.state.profile.displayName)

Лучше уничтожить профиль в постоянном 

const  { profile } = props.location.state;

И, наконец, на входе 

    <input value={displayName} name="displayName" type="text" placeholder="Display Name" onChange={(e) => {setDisplayName(e.target.value )}}/>
...