React Native，從嵌套在 state 的數組中訪問單個元素

Question

我怎樣才能像這樣訪問嵌套在 state 中的數組中的單個元素

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 個屏幕之間共享和更改一些特定數據。 我知道傳遞數據我需要使用 context 或 navigation.navigate("route name",item)。 但是如果我使用導航我將無法編輯它但是我如何從數組集中傳遞上下文值中的數據，如果我這樣做.state.post 它將返回整個列表如果我這樣做.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,
  },
});

Answer 3

Use.map() function Ex-

var cat_data = categories_list.map(函數(項目){

var cat_data = categories_list.map(function (item) {
    return {
      name: item.Name,
      thumb_url: item.PictureModel.ImageUrl,
      cat_id: item.Id.toString(),
    };
  });
  this.setState({
    data: cat_data,      
  });