Question

我正在尝试根据数组中保存的状态更新平面列表中项目的样式。更新状态后，虽然我在控制台中看到标志已更改，但未反映样式。这是我的代码片段...

constructor(props) {
    super(props);
    this.state = {
      categoryState: [1, 0, 0, 0, 0, 0, 0, 1]. // states
    }
  }

//正在渲染的组件

showCategories = ({ item }) => {
    return (
      <Ripple
        rippleDuration={1000}
        style={[styles.itemContainer, [this.state.categoryState[item.cIndex] !== 0 ? styles.selected : styles.notSelected]]}
        onPress={() => this.updateCategorieStatus(item)}
      >
       <Text style={styles.itemName}>{item.name}</Text>
      </Ripple>
    );

// 我正在更改状态并尝试更新样式的函数

updateCategorieStatus = (item) => {

    //changing selected state on the UI and updating the category state
 
   if (this.state.categoryState[item.cIndex] > 0) {

      let categoryState = this.state.categoryState
      categoryState[item.cIndex] = 0
      this.setState({ categoryState: categoryState });
      //console.log(this.state.categoryState);
    }
    else {
      let categoryState = this.state.categoryState
      categoryState[item.cIndex] = 1
      this.setState({ categoryState: categoryState });
      //console.log(this.state.categoryState);
    }
  };

Answer 1

尝试去掉样式逻辑中ternary operation中的方括号，修改后的代码看这里

<Ripple
    rippleDuration={1000}
    style={[styles.itemContainer, this.state.categoryState[item.cIndex] !== 0 ? styles.selected : styles.notSelected]}
    onPress={() => this.updateCategorieStatus(item)}
  >

这将解决问题。

Answer 2

除上述建议外，通过更新函数中的数组解决了问题，如下所示：

updateCategorieStatus = (item) => {
    //changing selected state on the UI and updating the category state
    if (this.state.categoryState[item.cIndex] > 0) {
      let categoryState = [... this.state.categoryState]; // <=== changes
      categoryState[item.cIndex] = 0;
      this.setState({ categoryState });
      //console.log(this.state.categoryState);

    }
    else {
      let categoryState = [... this.state.categoryState];
      categoryState[item.cIndex] = 1;
      this.setState({ categoryState });
      //console.log(this.state.categoryState);
    }
  };

更改本机状态后如何更新组件样式

2 个答案: