Question

我想制作一个本地JSON文件，并希望在其中发布数据。我想使用react-native制作考勤系统。我想使用react-native发布数据，数据将通过Flatlist发布。数据将为我保存一个由我创建的JSON文件。我已经制作了一个JSON文件

[{
    "Roll": 1101,
    "name": "Israt Jerin",
    "Status": "P"
},
{
    "Roll": 1102,
    "name": "Rifat Murtuza",
    "Status": "P"
},
{
    "Roll": 1103,
    "name": "Nabil Kaysar",
    "Status": "P"
}]

在这里我可以使用此代码访问该文件

 <FlatList
      data={data_local}
      showsVerticalScrollIndicator={false}
      renderItem={({ item }) => (
        <View>
          <Text> {item.name}</Text>
          <Text> {item.Roll}</Text>

          <RadioForm
            radio_props={radio_props}
            initial={0}
            onPress={value => {
              this.setState({ value: value });
            }}
          />
        </View>
      )}
      keyExtractor={(item, index) => index.toString()}
    />

这是我的“提交”按钮

<Button
      title="Submit"
      onPress={() =>
        this.MyPost()
      }
    />

这是项目外观

我的问题是我想使用此单选按钮和平面列表插入并插入json文件

Answer 1

您可以通过两种方式进行管理。

采用新的阵列状态，并相应地在该阵列中插入和删除项目。

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

您可以在现有数组中设置一个selected字段。并单击单选按钮更改其值。并在需要发布时收集所有选定的字段。

我会选择第二种方式。

准备最终json的示例

  prepareJson(){
      var json = {};
      json.image = this.state.image;
      var absent = [];
      var present = [];
      this.state.myArray.map(item => {
        if(item.Status == "P") present.push(item);  
        else absent.push(item);
      }
      json.absent = absent;
      json.present = present;
      return json;
  }

这是更改单选按钮时如何更改状态数组项值的方法。

 <FlatList
      data={this.state.data_local} // data should be rendered from state
      ...
      renderItem={({ item }) => (
        <View>
          ...
          <RadioForm
           ...
            onPress={value => {
              item.Status = value;
            }}
          />
        </View>
      )}
    />

这些更改将始终处于状态。因此，当您从状态获取数组时，将获取最新的数组以进行映射。

有关发布数据，请参见this answer。

更新

这是在状态中定义某些数组的方式。

constructor(props) {
    super(props);
    this.state = {
        array: [],
    };
}

如果您想更改状态字段，只需拨打setState()之类的

this.setState({ array});

react-native制作本地json文件

1 个答案: