React Native箭头函数中用传入参数作为state名失效问题求解

问题根因 #

你遇到的问题完全是语法使用错误导致的，和参数是字符串类型无关，具体错误点如下：

• 样式属性拼写错误：View组件的样式属性是小写的style，你写了大写开头的Style，所有样式规则直接不生效
• 动态读取state的语法错误：你传入的parentSelector、thisState都是state的键名字符串，不能直接写变量名读取，需要用this.state[键名]的语法访问。你原来写的{parentSelector}是直接判断字符串参数本身的布尔值（非空字符串永远为真），根本没有读取state里对应字段的值；TextInput的value同理，直接写{thisState}相当于把传进去的字符串当输入框值，和state完全不挂钩
• 动态更新state的语法错误：ES6中给对象用变量做键名需要加方括号，你原来写的setState({thisState: text})相当于把state里叫thisState的字段更新了，而不是更新你传参对应的字段
• TextInput重复定义了style属性，后面的行内样式会直接覆盖你之前写的FormStyles.textInputText

修复后的代码 #

returnCommentsBox = (parentSelector, labelText, thisState) => {
  return (
    // 读取state里对应父字段的值，控制显隐样式
    <View style={!this.state[parentSelector] && EL_Styles.dontShow}>
      <Text style={FormStyles.formLabel}>
        {labelText}
        <Text style={FormStyles.redHigh}>*</Text>
      </Text>
      <View style={FormStyles.textInputBlock}>
        <TextInput
          placeholder="Please Enter Details"
          autoCorrect={false}
          numberOfLines={4}
          multiline
          // 合并样式避免覆盖
          style={[
            FormStyles.textInputText,
            {
              minHeight: 280,
              height: 'auto',
              textAlignVertical: 'top',
            }
          ]}
          returnKeyType="done"
          // 动态读取state对应字段的值
          value={this.state[thisState]}
          // 变量做键名加方括号，动态更新对应state字段
          onChangeText={(text) => this.setState({[thisState]: text})}
        />
      </View>
    </View>
  );
};

调用方式和你原来的写法完全一致，不需要修改：

{this.returnCommentsBox(
       'gutterInspection',
       '2b. Please enter further details',
       'gutterComments',
  )}

注意提前在组件的state里初始化用到的字段，示例：

state = {
  gutterInspection: false,
  gutterComments: ''
}

内容的提问来源于stack exchange，提问作者Dancer