Question

我有一个将数据传递到屏幕组件模板的屏幕。这是模板。

import React, { Component } from "react";
import { Text, View } from "react-native";
import { List, ListItem, Icon, Body, Right } from "native-base";
import { observer, inject } from "mobx-react/native";
import styles from "./styles";

@inject("view.app", "domain.user", "app", "routerActions")
@observer
class ListDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categoryDrop: null,
    };
  }

    categoryDropdown(id) {
        if (this.state.categoryDrop === id) {
            this.setState({ categoryDrop: null });
            return;
        }
        this.setState({ categoryDrop: id });
        console.log(this.state.categoryDrop);
    }

    render() {
    return (
      <List
        removeClippedSubviews={false}
        bounces={false}
        dataArray={this.props.datas}
        renderRow={item =>
          <View>
            <ListItem
              onPress={() =>  this.categoryDropdown(item.id)}
              style={{ marginLeft: 0, paddingLeft: 10 }}
            >
              <Body>
                <Text style={styles.listHeading}>
                  {item.value}
                </Text>
              </Body>
              <Right>
                <Icon
                  style={styles.listIconHeading}
                  name={
                    item.id === this.state.categoryDrop
                      ? "ios-arrow-up"
                      : "ios-arrow-down"
                  }
                />
              </Right>
            </ListItem>
            {this.state.categoryDrop === item.id &&
              <List
                removeClippedSubviews={false}
                bounces={false}
                dataArray={item.sublist}
                renderRow={sublistItem =>
                  <ListItem
                    icon
                    style={styles.listDropItems}
                    onPress={() =>
                      this.props.navigation.navigate("ProductList")}
                  >
                    <Body>
                      <Text style={styles.listDropText}>
                        {sublistItem.value}
                      </Text>
                    </Body>
                    <Right>
                      <Icon style={styles.listIcon} name="ios-arrow-forward" />
                    </Right>
                  </ListItem>}
              />}
          </View>}
      />
    );
  }
}

export default ListDropdown;

父屏幕代码

import React, { Component } from "react";
import { ScrollView } from "react-native";
import {
  View,
  Text,
  Container,
  List,
  ListItem,
  Content,
  Card,
  CardItem,
  Left,
  Right,
  Button
} from "native-base";
import MyFooter from "../../components/Footer";
import BannerSlider from "../../components/BannerSlider/index.js";
import ListDropdown from "../../components/ListDropdown";
import ThemeHeader from "../../components/Header/index.js";
import { observer, inject } from "mobx-react/native";
import styles from "./styles.js";
import data from "../HomePage/data";

@inject("view.app", "domain.user", "app", "routerActions")
@observer
class Category extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categoryDrop: null
    };
  }
  categoryDropdown(id) {

      if (this.state.categoryDrop === id) {
      this.setState({ categoryDrop: null });
      this.setState({ arrowDirection: "ios-arrow-dropdown-outline" });
      return;
    }
    this.setState({ categoryDrop: id });
  }
  render() {
    const navigation = this.props.navigation;
    var ListDropdownData = [
      {
          id: 275,
          value: "Fitness",
          sublist: [{id: 131, value: "Treadmill"}, {id: 132, value: "Crosstrainer"}, {id: 134, value: "Rowing"}, {id: 134, value: "Rowing"},  ]
      },
      {
          id: 125,
          value: "Swimming",
          sublist: [{id: 138, value: "Swimwear"}, {id: 139, value: "Goggles"}, {id: 141, value: "Swimming Accessories"} ]
      },
      {
          id: 126,
          value: "Badminton",
          sublist: [{id: 138, value: "Swimwear"}, {id: 139, value: "Goggles"}, {id: 325, value: "Badminton Apparel"} ],
      },
      {
          id: 4,
          value: "Gitar",
          sublist: [{id: 158, value: "Amplifier"}, {id: 184, value: "Gitar Elektrik"}, {id: 194, value: "Gitar Akustik"} ]
      },
    ];
    return (
      <Container>
        <ThemeHeader PageTitle="CATEGORIES" IconRight="ios-search" />
        <Content showsVerticalScrollIndicator={false}>
          <Card>
            <CardItem style={{ padding: 0 }}>
              <ListDropdown navigation={navigation} datas={ListDropdownData} />
            </CardItem>
          </Card>
          <Card>
            <CardItem
              style={{ paddingTop: 0, paddingLeft: 0, paddingBottom: 0 }}
            >
              <Left>
                <Text style={{ fontSize: 14, color: "#696d79" }}>
                  RECENTLY VIEWED
                </Text>
              </Left>
              <Right>
                <Button small transparent>
                  <Text style={styles.clearAll}>CLEAR ALL</Text>
                </Button>
              </Right>
            </CardItem>
            <CardItem style={{ paddingHorizontal: 5, paddingVertical: 0 }}>
              <ScrollView
                directionalLockEnabled={false}
                horizontal={true}
                showsHorizontalScrollIndicator={false}
              >
                <List
                  removeClippedSubviews={false}
                  bounces={false}
                  contentContainerStyle={{ flex: 1, flexDirection: "row" }}
                  dataArray={data}
                  renderRow={item =>
                    <BannerSlider
                      imageStyle={{
                        height: 100,
                        width: 170,
                        resizeMode: "stretch"
                      }}
                      onPress={() => navigation.navigate("ProductList")}
                      bannerImageText={item.bannerImageText}
                      bannerImageSource={item.bannerImageSource}
                      bannerSmallText={item.bannerSmallText}
                      navigation={navigation}
                    />}
                />
              </ScrollView>
            </CardItem>
          </Card>
          <View style={{ alignItems: "center" }}>
            <ListItem noBorder>
              <Text style={styles.contactListItem}>Contact Us</Text>
            </ListItem>
            <ListItem noBorder>
              <Text style={styles.contactListItem}>FAQs</Text>
            </ListItem>
            <ListItem noBorder>
              <Text style={styles.contactListItem}>About Us</Text>
            </ListItem>
            <ListItem noBorder>
              <Text style={styles.contactListItem}>Terms of use</Text>
            </ListItem>
          </View>
        </Content>
        <MyFooter navigation={navigation} selected={"categories"} />
      </Container>
    );
  }
}
export default Category;

列表本身已呈现，问题是在我们按下按钮后子数组将不会出现。我试图删除列表上的状态categoryDrop检查，并呈现了数据。

还检查了功能是否起作用以及状态是否更改。为什么使用道具时列表不会下拉？

Answer 1

似乎您正在api响应之前呈现列表，因此在具有数据数组之前已经呈现了列表，而在api响应之后已经不再呈现视图。您可以在列表之前设置一个if条件，直到从api接收数据后该条件才会执行。

if(this.props.arr && this.props.arr.length>0){
    <List />
}

当隐藏之前，React不会渲染道具的子数组

1 个答案: