Блог

Я завершаю последние шаги своей формы, однако у меня возникла проблема при попытке отобразить текущее имя пользователя в defaultValue переменной TextField from MUI.

Если значение начинается "" / null или в основном пустое defaultValue , будет оставаться пустым независимо от того, сколько раз вы обновите это значение с «»/null до чего-то, есть ли способ это исправить?

У меня есть это:

 {console.log(tempName)}

<TextField 
required 
margin="dense" 
label='Nombre' 
defaultValue= {tempName} 
onChange={handleChangeName} />
 

tempName начинается пусто, но затем я обновляю его в у useEffect меня есть, который выводит данные документа пользователя, которого я регистрирую в банкомате, даже после того, как значение defaultValue остается пустым/нулевым/»».

Есть еще кое-что, что я заметил, хотя, если вы используете user.displayName напрямую, это работает, но только до тех пор, пока вы не обновите (потому что при обновлении пользователь возвращается к нулю, а затем нравится .2 сегс вернулся к своей ценности)

вот как это выглядит, когда я использую пользователя перед обновлением

так как пользователь приносит как имя, так и фамилию (в основном, отображаемое имя) Я хотел разделить его, и вся информация о пользователе находится в документе :

     const [tempName, setTempName] = useState("");
    const [tempLastName, setTempLastName] = useState("");
    const [tempEmail, setTempEmail] = useState("");
    const [tempPhone, setTempPhone] = useState("");
    const [tempIdType, setTempIdType] = useState("");
    const [tempIdTypes, setTempIdTypes] = useState("");

    useEffect(() => {
        const userDoc = db.collection('usuarios').doc(user.uid);
        userDoc.get().then(doc => {
            if (doc.exists) {
                const tempData = [];
                const data = doc.data();
                tempData.push(data);
                setTempName(tempData[0].name)
                setTempLastName(tempData[0].lastName)
                setTempEmail(tempData[0].email)
                setTempPhone(tempData[0].phone)
                setTempIdType(tempData[0].id)
                setTempIdTypes(tempData[0].idType)
                setOldPassword(tempData[0].password)
            }
          });
    }, [user])
 

Вот как это выглядит на базе огня

Так вот как это должно работать?

Я бы подумал, что defaultValue это приведет к обновлению до значения, которое вы ему даете… Спасибо, я не нашел ничего связанного с этим в документации по текстовому полю. Все, что я знаю, это то, что они добавляют инициализированные значения с самого начала, а не значения, которые «обновляются» со временем, я просто хотел отобразить текущую информацию пользователя в форме.

Посмотрите на пример с управляемым режимом, defaultValue не работает на последующих рендерах, если вы хотите контролировать и обновлять значение, используйте value prop.

Значение по умолчанию обычно используется в неконтролируемом режиме, когда значение контролируется элементом DOM, а не самим реагированием, и единственный способ изменить его-установить начальное значение при первом подключении. Доступ к значению неконтролируемого компонента (без использования ссылки) возможен только при отправке формы или проверке значения. Если вы хотите обновить состояние на лету на основе значения, введенного пользователем, используйте управляемый режим.

 value={value}
onChange={e => setState(e.target.value)}
 

в чем же тогда цель значения по умолчанию? если вы можете просто использовать заполнители для таких вещей, как «Имя», а затем использовать значение вместо значения по умолчанию

Если вы используете заполнитель, значение по умолчанию этого значения TextField не будет представлено в форме (вероятно, это не то, что вы ожидаете здесь).