React Native，从嵌套在状态中的数组中访问单个元素

Question

如何从嵌套在这种状态的数组中访问单个元素

state = {
    modal: false,
    post: [
      {
        key: "1",
        title: "A Good Boi",
        des: "He's a good boi and every one know it.",
        image: require("../assets/dog.jpg"),
      },
      {
        key: "2",
        title: "John Cena",
        des: "As you can see, You can't see me!",
        image: require("../assets/cena.jpg"),
      },
    ]
  };
.....
    <MyList.Provider
          value={{
           
          }}
        >
          <FlatList
            data={this.state.post}
            renderItem={({ item }) => (
              <>
                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => this.deleteItem(item)}
                  style={styles.Delete}
                >
                  <MaterialCommunityIcons name="delete" color="red" size={30} />
                </TouchableOpacity>
                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => this.props.navigation.navigate("Edit", item)}
                  style={styles.Edit}
                >
                  <MaterialCommunityIcons
                    name="playlist-edit"
                    color="green"
                    size={35}
                  />
                </TouchableOpacity>
                <Card
                  title={item.title}
                  subTitle={item.des}
                  image={item.image}
                  onPress={() =>
                    this.props.navigation.navigate("Details", item)
                  }
                />
              </>
            )}
          />
        </MyList.Provider>

我怎样才能像this.state.post({title}) 或其他方式那样做呢？ 我需要将此值与上下文一起使用，以便我可以在 2 个屏幕之间共享和更改一些特定数据。我知道传递需要使用上下文或导航的数据。导航（“路线名称”，项目）。但是，如果我使用导航，我将无法编辑它，但是如何从数组集中传递上下文值中的数据，如果我这样做 this.state.post 它将返回整个列表，如果我这样做 this.state.post[0 ].title 它将仅返回该帖子的标题。那么我该怎么做呢？请帮忙

Answer 1

您必须在数组中指明您尝试访问的对象的索引。例如，要访问数组中的第一个对象，您可以这样做 this.state.post[0]

Answer 2

以下是我的解决方案，它遵循我认为您正在努力实现的逻辑。我使用了平面列表 让我知道是否有帮助

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
} from 'react-native';

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      post: [
        {
          key: "1",
          title: "A Good Boi",
          des: "He's a good boi and every one know it.",
          image: require("../assets/dog.jpg"),
        },
        {
          key: "2",
          title: "John Cena",
          des: "As you can see, You can't see me!",
          image: require("../assets/cena.jpg"),
        },
      ]
    };
  }

  handleEdit(item) {
    const { post } = this.state;
    const extractIndex = post.findIndex(e => e.key === item.key);
    const newPost = post[extractIndex];

    this.props.navigation.navigate('Edit', { newPost })
    this.setState({ post });
  }

  handleDelete(item) {
    const { post } = this.state;
    const newPost = post.filter(e => e.key !== item.key);
    this.setState({ post: newPost });
  }

  renderItem = ({ item }) => {
  return (
      <View>
        <Text>
          {item.title}
        </Text>
        <TouchableOpacity key={item.key} onPress={this.handleEdit.bind(this, item)}>
          <Text>Edit</Text>
        </TouchableOpacity>
        <TouchableOpacity key={item.key} onPress={this.handleDelete.bind(this, item)}>
          <Text>Delete</Text>
        </TouchableOpacity>
      </View>
    );
  }
  
  render() {
    return (
      <View style={styles.container}>
        <FlatList 
          data={this.state.post}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => index.toString()}
          extraData={this.state}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});