React-Native报错：TypeError: Cannot read property 'trim' of undefined

错误原因 #

你更新skill状态时，每次只传入单个属性，导致另一个属性被覆盖为undefined。比如修改技能名称时调用setSkill({name:text})，此时skill对象里仅保留name字段，exp会变成undefined；同理修改经验值时，name会变成undefined。点击按钮调用trim()方法时，自然会触发「Cannot read property 'trim' of undefined」错误。

解决方案 #

更新状态时需保留原有对象的所有属性，只修改需要变更的字段，有两种常用实现方式：

方式1：使用展开运算符（...）保留原有属性 #

调用setSkill时，先用展开运算符复制当前skill的所有属性，再覆盖需要更新的字段：

<TextInput
  placeholder="Enter skill"
  placeholderTextColor={colors.divide_color}
  value={skill.name}
  editable={editable}
  onChangeText={(text) => setSkill({...skill, name:text})}
  style={styles.textInput}
/>
<TextInput
  placeholder="Enter experience"
  placeholderTextColor={colors.divide_color}
  value={skill.exp}
  editable={editable}
  onChangeText={(text) => setSkill({...skill, exp:text})}
  style={styles.textInput}
/>

方式2：使用函数式更新（推荐） #

若状态更新依赖前一个状态的快照，用函数式更新可避免闭包导致的状态不一致问题：

<TextInput
  placeholder="Enter skill"
  placeholderTextColor={colors.divide_color}
  value={skill.name}
  editable={editable}
  onChangeText={(text) => setSkill(prevSkill => ({...prevSkill, name:text}))}
  style={styles.textInput}
/>
<TextInput
  placeholder="Enter experience"
  placeholderTextColor={colors.divide_color}
  value={skill.exp}
  editable={editable}
  onChangeText={(text) => setSkill(prevSkill => ({...prevSkill, exp:text}))}
  style={styles.textInput}
/>

修正后的完整代码示例 #

const [skill, setSkill] = useState({
  name: "",
  exp: ""
})

<TextInput
  placeholder="Enter skill"
  placeholderTextColor={colors.divide_color}
  value={skill.name}
  editable={editable}
  onChangeText={(text) => setSkill(prevSkill => ({...prevSkill, name:text}))}
  style={styles.textInput}
/>
<TextInput
  placeholder="Enter experience"
  placeholderTextColor={colors.divide_color}
  value={skill.exp}
  editable={editable}
  onChangeText={(text) => setSkill(prevSkill => ({...prevSkill, exp:text}))}
  style={styles.textInput}
/>
                
<TouchableOpacity 
  onPress={() => {
    console.log(skill, "Skills");
    if(skill.name.trim().length != 0 && skill.exp.trim().length != 0){
      onAdd(skill)
      setSkill({
        name:"",
        exp:""  
      })
    }                    
  }}
  style={styles.AddButton} >
  <AntDesign 
    name="pluscircle" 
    size={wp(10)} 
    color={colors.dark_primary_color}  
  />
</TouchableOpacity>

内容的提问来源于stack exchange，提问作者Engr.Aftab Ufaq