Question

希望你一切都好

我的 react-native 项目遇到了一些奇怪的问题，某些页面中的 FlatList 项目没有显示，即使我在 console.log(json.items) 时可以看到它们。

今天早些时候，一切正常。所有页面都在我的设备上显示了它们应该显示的列表。然后我开始在零食上创建一个新的搜索页面，并添加了状态栏，在添加新代码和在我的应用中创建新文件之前，我测试了它在零食上工作。

我现在遇到的问题是，显示第一页上的列表，之后的后续页面不显示列表项。包括适用于零食的新搜索页面

我现在将继续发布我的代码，第一组用于列表项正确显示的页面：

App.js

class ProfileActivity extends Component
{

  // Setting up profile activity title.
   static navigationOptions = ({ navigation }) =>
   {
     return {
      title: 'Home',
      headerStyle : {
        backgroundColor: '#00b47a',
        elevation: 0
      },
      headerTitleStyle: {
        color: 'white'
      },
      cardStyle: { backgroundColor: '#fff' },
      headerLeft: null,
      headerRight: (
        <View style={{ alignSelf: 'center', alignItems: 'center', display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly'}}>
        <Icon containerStyle={{ paddingRight: 10 }}
        color='#fff' onPress={()=> navigation.getParam('openBottomSheet')()}
        name="menu" />
        <Icon containerStyle={{ paddingRight: 15 }}
        color='#fff' onPress={()=> navigation.getParam('openSearchPage')()}
        name="search" /></View>
      )
     }
   };

   constructor () {
    super()
    this.state = { toggled: false }
  }

  componentDidMount() {
    this.props.navigation.setParams({ openBottomSheet: this.onOpenBottomSheet });
    this.props.navigation.setParams({ openSearchPage: this.onOpenSearchPage });
  }

  onOpenBottomSheet = ()  => {
     this.Standard.open();
  }
  onOpenSearchPage = ()  => {
    this.props.navigation.navigate('sixth');
 }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        
      <StatusBar
      animated={true}
      backgroundColor="#00b47a"
      barStyle={'light-content'}
      showHideTransition={'slide'}
      hidden={false} />
         <MarketList navigation={this.props.navigation} />
         <RBSheet
           ref={ref => {
             this.Standard = ref;
           }}        
         >
...
         </RBSheet>
         </View>
    );
  }
}

Market.js

export default class MarketList extends React.Component {
  constructor(props) {
 
    super(props)
 
    this.state = {
      items: '',
    };
    this.animateList = new Animated.Value(0);
}

componentDidMount() {
  Animated.timing(this.animateList, {
    toValue: 1,
    duration: 500,
  }).start();
}
  render() {
    const rowStyles = [
        styles.itemList,
        { opacity: this.animateList },
        {
          transform: [
            { scale: this.animateList },
          ],
        },
      ];

      
    fetch('https://mvmarket.xyz/nativeuserapp/home.php')
    .then((response) => response.json())
    .then((json) => {
      this.setState({
        items: json.items,
      })
    })
    .catch((error) => {
      console.error(error);
    });
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.items}
          renderItem={({item}) => <TouchableOpacity onPress={()=>this.props.navigation.navigate("fourth",{market:item.name})}><Animated.View style={rowStyles}><View style={styles.item}><Text style={styles.market}>{item.name}</Text><Text style={styles.location}>{item.Location}</Text></View><View style={styles.go}><Icon name="arrow-right" color="#00b47a" /></View></Animated.View></TouchableOpacity>}
        />
      </View>
    );
  }
}

下一组用于不显示列表项的页面

App.js

class ProductsActivity extends Component {
  static navigationOptions =
  {
     title: 'Products',
     headerStyle : {
       backgroundColor: '#00b47a',
       elevation: 0
     },
    cardStyle: { backgroundColor: '#fff' },
     headerTitleStyle: {
       color: 'white'
     },
  };

  render() {

    return(
      <View>
      <StatusBar
      animated={true}
      backgroundColor="#00b47a"
      barStyle={'light-content'}
      showHideTransition={'slide'}
      hidden={false} />
      <ProductsList navigation={this.props.navigation} />
      </View>
    );
  }
}

Products.js

export default class ProductsList extends React.Component {
  constructor(props) {
 
    super(props)
 
    this.state = {
      items: '',
    };
  }
  
  render() {
    fetch('https://mvmarket.xyz/nativeuserapp/products.php')
    .then((response) => response.json())
    .then((json) => {
      this.setState({
        items: json.items,
      })
    }).catch((error) => {
      console.error(error);
      console.log(error);
    });
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.items}
          renderItem={({item}) => <TouchableOpacity onPress={()=>this.props.navigation.navigate("fifth",{market: this.props.navigation.state.params.market, type:item.type})} style={styles.itemList}><View style={styles.item}><Text style={styles.market}>{item.type}</Text></View><View style={styles.go}><Icon name="arrow-right" color="#00b47a" /></View></TouchableOpacity>}
        />
      </View>
    );
  }
}

我将 URL 留在那里，以便您可以自己确认数据是否已实际获取。它让我发疯，已经使用了大约 4 个小时。

谢谢

Answer 1

我认为您并没有真正理解 React 组件的生命周期方法。在开始编写代码之前理解这些概念很重要。您可以查看here

当您将 fetch 调用置于 render 中，然后执行 setState() 时，您正在无限地进行此操作。发生这种情况是因为您总是为 items 提供新值。

理想的情况是有一个模型层来处理这些类型的调用，但这是一个架构问题，为了不那么复杂，您可以使用容器/演示模式。

在 Container/Presentation 模式中，您有一个 ContainerComponent，它负责执行请求、处理回调并向 Presentation 组件提供数据，而 Presentation 组件将负责渲染内容。

如果你不想使用这个模式，至少把这个 fetch 调用放在 componentDidMount 方法中。

Answer 2

感谢大家的建议，适当地注意到和赞赏。

@Witalo-Benicio @Andris-laduzans @Drew-reese

我已经通过更改修复了它

class SearchMarketActivity extends Component {
  static navigationOptions = {
    headerShown: false, 
    cardStyle: {
      backgroundColor: 'white'
    }
  }

  render() {
    return(
       <View>
        <StatusBar
        animated={true}
        backgroundColor="#585858"
        barStyle={'light-content'}
        showHideTransition={'slide'}
        hidden={false} />

        <SearchMarket navigation={this.props.navigation} />
</View>
    )
  }
}

到

class SearchMarketActivity extends Component {
  static navigationOptions = {
    headerShown: false, 
    cardStyle: {
      backgroundColor: 'white'
    }
  }

  render() {
    return(
        <SearchMarket navigation={this.props.navigation} />
    )
  }
}

之后，我将 StatusBar 添加到要导入的 <SearchMarket /> 组件

反应原生平面列表不呈现项目

2 个答案: