Javascript 如何在平面列表中仅展开一项

我是react native的初学者，我使用Flatlist来呈现水果列表，列表呈现正确，问题是当我单击从列表中展开一个项目时，所有其他项目也会展开。我制作了一个显示当前行为的gif，并将代码放在零食中以便于理解

你能告诉我如何打开我点击的项目吗

还有，我如何使我的平面列表的第一项总是在默认情况下展开

---

提前谢谢。

对于所有列表项，您的布尔值

true

都是

true

，因此这不起作用。显然，扩展的

必须是唯一的值，即
水果名
（不是索引！），然后比较该值

onChangeLayout = (fruitName) => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded: fruitName });
    this.componentDidMount();
  };

...

onPress={() => this.onChangeLayout(item.fruit_name)}

...

height: (this.state.expanded === item.fruit_name) ? null : 0,

当您请求将第一项扩展为初始项时，您应该在fetch success作用域块中这样做

.then(responseJson => {
  const dataSource = responseJson['data'];
  this.setState({
    fruitLIst: true,
    dataSource,
    expanded: (dataSource && !!dataSource.length) ? dataSource[0].fruit_name : null
 })

另外，在另一种方法中使用
componentDidMount
逻辑也是一种很好的做法，这种方法在这个生命周期中刚刚被调用。
这非常有效，非常感谢Jank！！！还有一件事，你能告诉我如何让我的平面列表的第一个项目在默认情况下总是展开的吗？Hii@jank，这成功了，现在第一个项目显示为展开的，但是，当我单击时，其他项目不会展开，如果你想看的话，我更新了零食中的代码：@vbernal remove
this.componentDidMount（）在
onChangeLayout
方法中。您不应该在其他方法中调用
this.componentDidMount
，因为这是一种生命周期方法我将使用其他方法，因为当我从onChangeLayout（）中删除componentDidMount（）时，布局动画停止工作，并且没有项目再次展开，我刷新了零食盒中的代码，以防您看到：