Question

我尝试从服务器https://github.com/toystars/react-native-multiple-select中为多选择选择器组件获取值。但是我收到一条错误消息：TypeError：null不是一个对象（正在评估this.state.LangKnown）。

请帮助。谢谢

我的JSON值

{
 "MFBasic": {
   "SkinTones": "DARK,FAIR,VFAIR",
   "Build": "SLIM,ATHLETIC,PLUMPY",
   "Gender": "F,M,T",
   "Genre": "ACTION,COMEDY,DRAMA",
   "Languages": "ENG,HINDI,TAM",
   "MediaModes": "ADS,MOVIES,SHORTFILMS",
   "Tags": "BIKES,HOME,JEWELLARY"
  },
 "Result": "Successfully Loaded MF Basic Details",
 "Code": 100

}

 import React, {Component} from "react";
 import { Text, View, StyleSheet, Picker, Alert } from "react-native";
 import MultiSelect from "react-native-multiple-select";

export default class App extends React.Component {
  state = {
    LangPickerValueHolder: [],
    LangKnown: []
  }

  componentDidMount () {
    fetch('https://movieworld.sramaswamy.com/GetMFBasicDetails.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then(response => response.json())
      .then(responseJson => {
        let langString = responseJson.MFBasic.Languages;
        let langArray = langString.split(',');
        this.setState({
          LangPickerValueHolder: langArray
        });
      }).catch(error => {
        console.error(error);
      });
  }

  render () {
    return (

      <View style={styles.itemContainer}>
        {<MultiSelect
          ref={(component) => { this.multiSelect = component; }}
          onSelectedItemsChange={(value) =>
            this.setState({ LangKnown: value })
          }
          selectedItems={this.state.LangKnown}
          onChangeInput={ (text) => console.log(text)}
          displayKey = ''name
          submitButtonText="Submit">
          {this.state.LangPickerValueHolder.map((item, key) => (
            <MultiSelect.Item item = {item} uniqueKey = {key}/>
          ))}
        </MultiSelect>}
      </View>
    );
  }
}

Answer 1

您已经很好地尝试了如何设置MultiSelect，但是有一些问题需要解决。

如果您查看依赖关系，则应该传递给它的数据应该是对象数组。该示例将对象表示为{ id: '92iijs7yta', name: 'Ondo' }。我们可以轻松地将数据从字符串数组转换为与示例匹配的对象数组。

let LangPickerValueHolder = langArray.map((name, id) => { return { name, id }; });

使用地图，我们可以转换数组。

这会使您的componentDidMount如下所示：

componentDidMount () {
  fetch('https://movieworld.sramaswamy.com/GetMFBasicDetails.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  }).then(response => response.json())
    .then(responseJson => {
      let langString = responseJson.MFBasic.Languages;
      let langArray = langString.split(',');
      let LangPickerValueHolder = langArray.map((name, id) => { return { name, id }; }); // <- here we had the mapping function
      this.setState({ LangPickerValueHolder }); // <- save the new array of objects into the state
      console.log(langArray);
    }).catch(error => {
      console.error(error);
    });
}

设置MultiSelect组件还需要进行一些更改。

首先，没有MultiSelect.Item，因此您用来填充map的{{1}}无效。相反，您需要使用MultiSelect道具来设置项目。接下来，您需要告诉items组件正确的MultiSelect属性（在我们的情况下为uniqueKey），并正确设置id。

这是您的displayKey的样子。

render

这里是放在零食中的：https://snack.expo.io/@andypandy/multiselect-with-data-from-api

这是小吃中的代码：

render () {
  return (
    <View style={styles.container}>
      <MultiSelect
        ref={(component) => { this.multiSelect = component; }}
        onSelectedItemsChange={(value) =>
          this.setState({ LangKnown: value })
        }
        uniqueKey="id"
        items={this.state.LangPickerValueHolder} 
        selectedItems={this.state.LangKnown}
        onChangeInput={ (text) => console.log(text)}
        displayKey = 'name'
        submitButtonText="Submit" />
    </View>
  );
}

从服务器获取值以进行多选选择器反应

1 个答案: