Question

向整个社区问好。

我正在做一个项目，通过该应用程序，我市中的餐馆可以放置菜肴并生成订单。

但是执行我的项目时出错。

这是我的错误。

Warning: Each child in a list should have a unique "key" prop.%s%s  
Check the render method of `VirtualizedList`., , 
    in CellRenderer (at VirtualizedList.js:767)
    in VirtualizedList (at FlatList.js:676)
    in FlatList (at Meals.tsx:14)
    in RCTView (at Meals.tsx:12)
    in Meals (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:900)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:100)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:131)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:900)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:100)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:131)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at withExpoRoot.js:26)
    in RootErrorBoundary (at withExpoRoot.js:25)
    in ExpoRoot (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in DevAppContainer (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

我正在使用React-native在前端进行项目。

**我的代码是这-我的前端**

App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import MealsScreen from './src/screens/Meals';
import Modal from './src/screens/Modal';

const AppNavigation = createStackNavigator({
  Meals: {
    screen: MealsScreen
  }
}, {
  initialRouteName: 'Meals'
});

const RootStack = createStackNavigator( {
  Main: AppNavigation,
  Modal: Modal,
}, {
  mode: 'modal',
  headerMode: 'none',
});

export default createAppContainer( RootStack );

餐食

import React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import ListItem from '../components/ListItem';
import UseFetch from '../hooks/useFetch';

const Meals = ({navigation}) => {
    const { loading, data: meals } = UseFetch('https://serverless.mgyavega.now.sh/api/meals');

    return(
        <View style =  { styles.container }>
            { loading ? <Text style =  { styles.text }>Cargando por favor espere...</Text> :
                <FlatList
                    style = { styles.list }
                    data = { meals }
                    keyExtractor= { x => x.id }
                    renderItem = {({ item }) =>
                        <ListItem
                            onPress={ () => navigation.navigate('Modal', { id: item.id })}
                            name = { item.name }
                        />
                    }
                />
            }
        </View>
    )
}

Meals.navigationOptions = ({
    title: 'Comidas Disponibles',
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'flex-start',
        justifyContent: 'flex-start'
    },
    list: {
        alignSelf: 'stretch'
    },
    text: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

export default Meals;

创建一个调用Flatlist操作的列表，并管理列表中的信息。

List.js

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

export default ({ name, onPress }) => {
    return (
        <TouchableOpacity onPress = { onPress } style={ styles.container }>
            <Text style = { styles.text }> {name} </Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 15,
        height: 60,
        justifyContent: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    },
    text: {
        fontSize: 16
    }
});

获取我的项目的网址。

UseFecth.js

import { useEffect, useState } from 'react';

const UseFetch = ( url ) => {
    const [loading, setLoading] = useState(true);

    const [ data, setData] = useState([]);

    const fetchData = async () => {

        const response = await fetch(url);

        const data  = await response.json();

        setData(data);

        setLoading(false);
    };

    useEffect(() => {
        fetchData();
    }, [] );

    return { loading, data }
}

export default UseFetch;

我的modal.js

import React from 'react';
import {  View, Text, } from 'react-native';
import UseFetch from '../hooks/useFetch';

export default ({navigation}) => {

    const id = navigation.getParam('_id');
    const { loading, data } = UseFetch(`https://serverless.mgyavega.now.sh/api/meals/${id}`);

    console.log( 'Información del id del menú: ', id );

    return (

        loading ? <Text>Cargando </Text> :
            <View>
                <Text>  </Text>
                <Text>  </Text>
            </View>

    )
}

我正在使用MongoDB，Ziet和Node.js做后端。

这是我的路线。

index.js

var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.json());
var meals = require('./routes/meals');
var orders = require('./routes/orders');

mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true } );

app.use('/api/meals', meals);
app.use('/api/orders', orders);

module.exports = app;

Meals.js

var express = require('express');
var Meals = require('../models/meals');
var router = express.Router();

router.get('/', ( req, res ) => {
    Meals.find()
         .exec()
         .then( x => {
             res.status(200).send(x)
    });
});

router.get('/:id', ( req, res ) => {
    Meals.findById(req.params.id)
         .exec()
         .then( x => {
             res.status(200).send(x);
    });
});

Models.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const Meal = mongoose.model('Meal', new Schema({
    name: String,
    desc: String,
}));

module.exports = Meal;

我不知道为什么信息会重复我。

我非常感谢您能与我合作。

谢谢。

马里奥

Answer 1

我最好的猜测是该行正在产生重复的密钥。

keyExtractor= { x => x.id }

Answer 2

export default ({ name, onPress }) => {
    return (
        <TouchableOpacity onPress = { onPress } style={ styles.container } 
                  key={name}>//  add key
            <Text style = { styles.text }> {name} </Text>
        </TouchableOpacity>
    )
}

Answer 3

在这一行中，keyExtractor = {x => x.id} ID可能已重复。例如。 [{“ id”：1，“ name”：“ hello”}，{“ id”：1，“ name”：“ world”}] 这两个值具有相同的ID。

如果列表中的所有值都是唯一的，请尝试keyExtractor = {x => x} 否则，您可以使用列表中的任何属性。例如.keyExtractor = {x => x.name}

Answer 4

使用数据库ID作为键的问题在于，根据查询，数据库可以返回具有重复ID的行。我在我的项目中使用了uuid（https://www.npmjs.com/package/uuid），它的工作原理就像一个吊饰！

Answer 5

如果某人有相同的事情，解决方案是最简单的。

在keyExtractor = {x => x.id}中，它用keyExtractor = {x => x._id}进行了更改，因为在mongoDB数据库中，每条记录的ID是_id，因为我将其与给定的id一起使用我这引起了重复。

其他所有都是正确的。

他希望他能帮助某人。

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。％s％s

5 个答案: