React native 反应本机：未显示平面列表

我正在尝试制作一个自定义组件，如果第一个选项不够清晰，它将显示新选项的选项。我正在使用

FlatList

组件来显示数据，它似乎没有显示作为道具提供的数据

这是组件的

渲染

功能

import { Header, List, ListItem } from "react-native-elements";
import PickerBox from "./PickerBox";

render() {
    return (
      <View>
        <Header
          centerComponent={{
            text: "By " + this.state.newTaxon + ", did you mean...",
            style: { color: "white", fontSize: 20, textAlign: "center" }
          }}
          backgroundColor="black"
        />
        <FlatList
          data = {this.state.dataSource}
          renderItem = {({item}) => {
            <PickerBox
              title = {item.c_syn_name}
            />
          }}
          keyExtractor = {(item) => item.c_syn_name}
        />
      </View>
    );
}

import PickerBox from "./PickerBox"; // reside in same folder

这是组件中PickerBox的导入语句

import { Header, List, ListItem } from "react-native-elements";
import PickerBox from "./PickerBox";

render() {
    return (
      <View>
        <Header
          centerComponent={{
            text: "By " + this.state.newTaxon + ", did you mean...",
            style: { color: "white", fontSize: 20, textAlign: "center" }
          }}
          backgroundColor="black"
        />
        <FlatList
          data = {this.state.dataSource}
          renderItem = {({item}) => {
            <PickerBox
              title = {item.c_syn_name}
            />
          }}
          keyExtractor = {(item) => item.c_syn_name}
        />
      </View>
    );
}

import PickerBox from "./PickerBox"; // reside in same folder

dataSource

状态来自一个JSON对象，该对象在每个条目中都包含类似的布局

"c_node_name_scientific": "Centurio",
"c_syn_name": "wrinkle-faced bat",
"i_node_id": 27644,

模拟器中的输出只是标题，但预期的输出是标题，下面有列表。

您可以试试这个

renderItem={（{item}）=>{
选择器箱（项目c\U syn\U名称）；
}}

首先，请确保

此.state.dataSource

不是空数组。 如果您的数据源是这样的，那么这应该可以工作：

<FlatList 
    data={[{c_syn_name: 'a'}, {c_syn_name: 'b'}]}
    keyExtractor = {item => item.c_syn_name}
    renderItem={({item}) =><PickerBox title = {item.c_syn_name} />}
    />

item.c\u syn\u name}
renderItem={（{item}）=>}
/>

首先，您需要确保，如果您的

renderItem

方法像示例中那样使用带花括号的胖箭头函数，则需要添加一个return语句，如下所示：

renderItem={({item}) => { return <PickerBox title={item.c_syn_name} /> }}

如果是这种情况，只需将状态的

数据源

对象包装在一个数组中，如上所示

如果要将数据作为类似以下内容的对象传入：

[
  {
    "c_node_name_scientific": "Centurio",
    "c_syn_name": "wrinkle-faced bat",
    "i_node_id": 27644
  },
  {
    "c_node_name_scientific": "xxx",
    "c_syn_name": "xxx",
    "i_node_id": 123
  },
  //...
]

{
  key1: {title: 'Title 1'},
  key2: {title: 'Title 2'}
  key3: {title: 'Title 3'}
}

您需要执行以下操作，以使数据可访问平面列表：

<FlatList
  data={Object.keys(this.state.dataSource)}  // will result in ["key1", "key2", "key3"]
  renderItem={({item}) => 
    // here `item` will be the Object's key. eg: "key1"
    <PickerBox title={this.state.dataSource[item].title} />
  }
/>

//这里的'item'将是对象的键。例如：“键1”
}
/>

最后，如果平面列表需要随着状态更新而更新，则需要将prop

extraData={this.State}

添加到平面列表中。根据：

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

---

对我来说，问题是父元素有flex:1。

---

删除它解决了我的问题

请在PickerBoxI中添加样式我已经添加了样式。对于第一部分，如果我删除大括号或在大括号中添加return语句。我将收到一个错误消息，说明控制台。错误：`“未处理的JS异常：不变冲突：对象作为React子对象无效（找到：具有键{title}的对象）。如果要呈现子对象集合，请使用数组。`如果忽略大括号，则会收到警告消息，提示列表中的每个子对象都应具有唯一的键属性，并且不会呈现任何内容。@dp请删除大括号，并用括号替换。（）就关键问题而言，请查看将道具添加到平面列表，并使用类似以下内容的

item.i\u node\u id}/>