Question

在我的本机应用程序中，我具有一个将按下项的状态从false更改为true的功能，但是问题是，它不仅改变了按下项的状态，还改变了所有项的状态，当我按下以仅在我的FlatList内将其更改为按下的，这是代码：

初始状态：

state={pressed: false}

功能

：

changeItem = async item => {this.setState({ pressed: true });};

渲染项目并绑定功能：

_renderItem({ item, index }) {
   <TouchableOpacity onPress={this.changeItem.bind(this, item)}>
     <Text> Click me </Text>
   </TouchableOpacity>
   );
}

平面列表：

<FlatList data={this.state.items}
          keyExtractor={this._keyExtractor.bind(this)}
          renderItem={this._renderItem.bind(this)}/>

Answer 1

这里的问题是您有一个项目列表，但是所有项目都具有相同的状态。

您需要一个项目列表（一个数组），但是还需要一个项目状态数组。

因此，您需要state = { pressed: false }代替state = { pressed: []}

渲染项目时，您需要传递按下按钮的索引：

_renderItem({ item, index }) {
   return this.state.pressed[index] &&
       <TouchableOpacity onPress={this.changeItem.bind(this, item, index)}>
          <Text> Click me </Text>
       </TouchableOpacity>
}

并且仅在所选索引中更新状态

changeItem = async (item, index) => {
    let itensPressed = this.state.pressed
    itensPressed[index] = itensPressed[index] ? false : true
    this.setState({ pressed: itensPressed })
}

但是还有比这更好的事情。

我看到您正在从items获取state，所以也许您想更新items数组而不创建另一个变量。

这取决于您的this.state.items即将到来以及您是否可以在该数组中拥有isPressed值。

如果您显示items的来龙去脉，那么我可以创造一个更好的答案。

Answer 2

如果您有多个具有自己状态的按钮。您需要使数组处于按下状态的布尔值，以便数组中的每个元素都有自己的按下状态。

这样做吧。

import React, {Component} from 'react';
import { FlatList, TouchableOpacity, Text} from 'react-native';

sampleData = [
  {key: 0, pressed: false},
  {key: 1, pressed: false},
  {key: 2, pressed: false}
]

export default class Example extends Component {

  state={
    data: sampleData
  }

  componentDidUpdate(){
    console.log(this.state.data)
  }

  changeItem(item)
  {
    this.setState( (prevState) => {
      prevState.data[item.key] = { ...item, pressed: !item.pressed}
      return{
        ...prevState,
        data: [...prevState.data]
      }
      });
  };  



  _keyExtractor = (item, index) => item.key;

  _renderItem({ item, index }) {
    return(
      <TouchableOpacity onPress={this.changeItem.bind(this,item)}>
      <Text> Click me </Text>
    </TouchableOpacity>
    )

 }

  render() {
    const {data} = this.state
      return (
        <FlatList
        data={data}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem.bind(this)}
      />
      )
    }
  }

我只是创建一个包含键和按下属性的对象数组，并将其传递给state.data

检查控制台日志，以查看输出状态。

仅更改按下项目的状态

2 个答案: