如何使用带有FlatList React Native的react-native-element checbox处理来自json的复选框？ [英] How to handle checkbox fetching from json using react-native-element checbox with FlatList React Native?

问题描述

我正在尝试创建名称为从json提取的动态复选框，这个问题看起来和我需要的一样，但是没有代码解释，我无法实现目标，

I'm trying to create dynamic checkbox with the name fetching from json, this issue looks same as I need, but without the code explaining, I can't archieve my goal,

我有一个json示例像这样：

I have a json example like this :

this.state = {
  data : [
  {
    "name": "ALL",
  },
  {
    "name": "Android",
  },
  {
    "name": "iOS",
  },
  {
    "name": "React Native",
  }
]}

并使用以下代码：

<CheckBox
  center
  title={this.state.data[1].name}
  onPress={() => {this.setState({checked: !this.state.checked})}}
  checked={this.state.checked}
/>

复选框运行良好，但仅显示json的第二个值

the checkbox running well but it's just showing 2nd value of json

我的目标是将所有json值显示到平面列表中，并使复选框运行良好，

My Goal is to displaying all of json value into flatlist and makes checkbox running well,

现在我可以将这些json显示到FlatList中，但此复选框不起作用

For now I just can displaying those json into FlatList, but the checkbox is not works

import React, { Component } from 'react';
import {
  Text, View, StyleSheet, Alert, FlatList
} from 'react-native';
import Dimensions from 'Dimensions';
import { CheckBox } from 'react-native-elements'

const DeviceWidth = Dimensions.get('window').width;
const DeviceHeight = Dimensions.get('window').height;

class MedicalClearlance extends React.Component {

  constructor(props){
    super(props); 
    this.state = {
      checked:[],
      data : [
      {
        "name": "ALL",
      },
      {
        "name": "Android",
      },
      {
        "name": "iOS",
      },
      {
        "name": "React Native",
      }
    ]}
  }

  render() {
    return (
      <FlatList
        data={ this.state.data }
        renderItem={({item, index}) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => {this.setState({checked: !this.state.checked}), console.log(this.state.checked +' '+ index)}}
          checked={this.state.checked}/>
        }
      />
    );
  }
}

有人能帮助我实现目标吗？

anyone can help me how to archieve my goal?

推荐答案

Ahsan的答案提供的Ali 将有效。 但是它缺少非常重要的代码行。

The answer that Ahsan Ali provided will work. However it is missing a very vital line of code.

• 在< FlatList /> 组件，请确保添加此 extraData
= {this.state} 。每当状态更改时，这将允许FlatList组件重新呈现。

• Within the <FlatList/> component, be sure to add this extraData ={this.state}. This will allow the FlatList component to re-render whenever the state is changed.

render方法将然后看起来像这样：

The render method will then look like this:

handleChange = (index) => {
  let checked = [...this.state.checked];
  checked[index] = !checked[index];
  this.setState({ checked });
}

render() {
  let { data, checked } = this.state;
  return (
    <FlatList
      data={data}
      extraData={this.state}
      renderItem={({ item, index }) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => this.handleChange(index)}
          checked={checked[index]} />
      }
    />
  );
}

通过传递extraData = {this.state}对于FlatList，我们确保在state.selected更改时，FlatList
本身将重新呈现。如果不为此道具设置
，FlatList将不知道它需要重新渲染任何项目
，因为它也是PureComponent并且道具比较不会显示
任何更改。

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

更多信息可以在React-Native Flat-List文档中找到此处。

More information can be found at React-Native Flat-List documentation here.

如果您使用的是 Ahsun Ali的帖子中的代码，您可能会遇到另一个错误。

If you're using the code from Ahsun Ali's post, there may be another error you come across.

• 警告错误显示 componentWillMount（）方法为
  不推荐使用。在这种情况下，请确保使用 componentDidMount（）
  来代替。

• A warning error displays that the componentWillMount() method is deprecated. In which case be sure to use the componentDidMount() instead.

希望这对人们有帮助！

这篇关于如何使用带有FlatList React Native的react-native-element checbox处理来自json的复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！