使用 React Hooks + Firestore 将字段值作为 null 添加到集合中答案

【问题标题】：Field values are added to collection as null with React Hooks + Firestore使用 React Hooks + Firestore 将字段值作为 null 添加到集合中
【发布时间】：2020-07-25 12:45:12
【问题描述】：

我正在开发一个 React Native 应用程序，我想使用 React Hooks 将一个表单发布到 Firestore。它几乎可以工作，但字段值在 Firebase 中显示为 null。我究竟做错了什么？使用反应原生 0.60.5 和反应原生火力基地 5.6.0。提前致谢！

const [ trackTitle, setTitle ] = useState('')
const [ artistName, setArtist ] = useState('')

function onSubmit(e) {
    firestore()
    .collection('tracks')
        .add(
          {
          trackTitle,
          artistName
        })
}

<TextInput 
     value={trackTitle} 
     onChange={e => setTitle(e.target.value)}
     style={styles.submissionInput}
     multiline={false}
/> 

<TextInput 
     value={artistName} 
     onChange={e => setArtist(e.target.value)}
     style={styles.submissionInput}
     multiline={false}
/>

<TouchableOpacity
     onPress={onSubmit}
     style={styles.navButtons}>

Firebase 控制台的屏幕截图：

【问题讨论】：

如果您将提交功能更改为function onSubmit(e) { console.log(trackTitle, artistName); firestore() .collection('tracks') .add( { trackTitle, artistName }) } 控制台会记录哪些值？
@LenJoseph 我明白了：2020-04-12 21:34:22.578 [info][tid:com.facebook.react.JavaScript] 未定义，未定义 2020-04-12 21:34： 22.578072-0700 appname [45583:824514] 未定义，未定义
好的，所以您在将数据提交到 Firestore 之前就将状态设置为 undefined。尝试将e.target.value 记录到控制台，看看该值是否与您将其传递给setTitle 时的想法相同

标签： javascript reactjs react-native google-cloud-firestore react-hooks

【解决方案1】：

问题是你要的值不在e.target.value，而是在e.text，所以onChange={e => setTitle(e.target.value)}，应该是onChange={e => setTitle(e.text)}

不过，我建议你使用onChangeText={newValue => setTitle(newValue)}，更好的是onChangeText={setTitle}

RN Docs

<TextInput 
     value={trackTitle} 
     onChangeText={setTitle}
     style={styles.submissionInput}
     multiline={false}
/> 

<TextInput 
     value={artistName} 
     onChangeText={setArtist}
     style={styles.submissionInput}
     multiline={false}
/>

【讨论】：