Question

我有一个对象数组，我当前正在映射以生成按钮。点击后，我想要用户点击的特定按钮的背景颜色来改变颜色（我希望它打开，就像一个开关，所以我最终可以保存到异步存储）。现在，当用户点击时，所有按钮都会改变颜色。我不太确定如何在selectMetric函数中处理this.setState。

import React, {Component} from 'react';
import {View, Text, ScrollView} from 'react-native';
import {Button} from 'react-native-elements';

const RISK_DATA = [
  {id: 1, text: 'cats', flag: false, buttonColor: null},
  {id: 2, text: 'dogs', flag: false, buttonColor: null},

]


class IssueSelectionScreen extends Component {

  state = {flag: false, buttonColor: null}

  selectMetric = (index) => {

    for (let i=0; i < RISK_DATA.length; i++) {

      if (index === (RISK_DATA[i].id - 1)) {

      console.log("RISK_DATA:", RISK_DATA[i]); // logs matching id

// ------------------------------------------------------
// Problem setting correct state here:

      RISK_DATA[i].buttonColor = this.setState({flag: true, buttonColor: '#03A9F4'})

      // this.setState({flag: true, buttonColor: '#03A9F4'})
      // this.setState({update(this.state.buttonColor[i], {buttonColor: {$set: '#03A9F4'}}) })


// ----------------------------------------------------------
      }
    }
  }

  showMetric() {
    return RISK_DATA.map((metric, index) => {
      return (
        <View key={metric.id}>
          <Button
            raised
            color={'black'}
            title={metric.text}
            borderRadius={12}
            onPress={() => this.selectMetric(index)}
            backgroundColor={this.state.buttonColor}
          >
            {metric.text}
          </Button>
          <Text>{/* intentionally blank*/} </Text>
        </View>
      )
    })
  }

  render() {
    return(
      <ScrollView style={styles.wrapper}>
        <View style={styles.issues}>
          {this.showMetric()}
        </View>
      </ScrollView>
    );
  }
}


const styles = {
  issues: {
    justifyContent: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    marginTop: 10,
    justifyContent: 'space-between',
  },
  wrapper: {
    backgroundColor: '#009688'
  }
}

export default IssueSelectionScreen;

Answer 1

所以对你的问题的简短回答看起来像这样：

class IssueSelectionScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: cloneDeep(RISK_DATA),
    };
  }

  selectMetric = (index) => {
    const tempData = cloneDeep(this.state.data);
    tempData[index].flag = !tempData[index].flag;
    this.setState({ data: tempData });
  }

  showMetric() {
    return this.state.data.map((metric, index) => {
      // same
    })
  }

  render() {
    // same
  }
}

它涉及将整个按钮阵列置于状态，因为这些按钮的状态是可以改变的。您还可以将标志保持为状态中的数组，并将按钮信息保持为单独的常量

此解决方案使用cloneDeep（来自lodash）来防止代码改变对象的状态，但您可能也可以使用this.state.data.map并创建新对象（只要您的对象不是深深嵌套）。

如果你正在使用Redux，列表可能会作为prop进入组件，然后selectMetric将调度一个动作来更新Redux中的标志。

Answer 2

对于观看此帖子的其他人，上面的答案非常有帮助。要添加一些最后的评论，如果您试图让按钮点亮，我添加了一个简单的if else to selectMetric：

if (tempData[index].flag) {
  tempData[index].buttonColor = '#03A9F4';
  console.log('tempData true:', tempData);
} else {
  tempData[index].buttonColor = null;
  console.log('tempData false:', tempData);
}

并使用以下命令更新showMetric中Button上的backgroundColor属性：

backgroundColor={this.state.data[index].buttonColor}

如何在数组React Native中设置特定索引的State

2 个答案: