홈>2020-02-01 00:42

react native - FlatList에서 상태의 데이터를 어떻게 설정합니까?

제품 ID 저장( item.id ) ) productId 와 같은 상태 .

장바구니에 제품을 추가하려면 제품 ID가 필요합니다.

TouchableOpacity 를 클릭하면 잘 작동하지만 productId 항상 4입니다.

세 개의 아이템이 있습니다. 와이즈 비즈 마지막 항목 중 4 개는 첫 번째 항목은 2입니다.

id 를 클릭하면 제품 1의 ID는 4이지만 2 여야합니다.

listView에서 ID를 인쇄 할 때 ID가 정상임을 알 수 있습니다.

TouchableOpacity

 <FlatList
     data={this.state.dataSource}
     renderItem={({item}) =>
     <View>
     <View>
     <Text>{item.title} - {item.type}</Text>
     <Text>{item.id}</Text>
     <TouchableOpacity onPress={this.decrementCount,()=>this.setState({productId:item.id})}>
     <AntDesign name="minus" size={15} style={{color:'#fff'}}/>
     </TouchableOpacity>

     <TouchableOpacity onPress={this.incrementCount} activeOpacity={0.5}>
     <AntDesign name="plus" size={15} style={{color:'#fff'}}/>
     </TouchableOpacity>
     </View>
     </View>
     }
     />

react-native react-native-flatlist

답변 # 1
이 줄이 귀하의 문제라고 생각합니다 :
```
<TouchableOpacity onPress={this.decrementCount,()=>this.setState({productId:item.id})}>
```
먼저 클래스에 렌더 함수를 정의해야하며, onPress 함수와 별도로 정의해야합니다. 예를 들면 다음과 같습니다.
```
class MyClass extends React.Component {
  handlePress = (item) => {
    this.decrementCount()
    this.setState({productId: item.id})
  }
  renderItem = ({item, index}) => {
    return (...code from above, but using this.handlePress rather than your onPress function as currently defined)
  }
  render() {
    return (
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    )
  }
}
```
현재 작동하지 않는 진짜 이유는 onPress 함수에서 this.setState를 콜백으로 호출하려고하기 때문입니다. 현재 onPress를 다음에서 변경 한 경우 그대로 작동합니다. 와이즈 비즈 에 와이즈 비즈 this.setState에서 콜백으로 불리는 함수를 가질 수 있다고 확신합니다.

이것이 도움이되기를 바랍니다!
onPress={this.decrementCount,()=>this.setState({productId:item.id})}

Python2.net

react native - FlatList에서 상태의 데이터를 어떻게 설정합니까?

관련 자료