警告：列表中的每个子项都应具有唯一的“键”道具。%s%s

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本地做我的前端项目。

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

应用程序。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操作的列表，并管理列表中的信息。

列表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
    }
});

获取我的项目的url。

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.

这是我的路线。

指数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;

餐。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

使用数据库ID作为键的问题在于，根据您的查询，数据库可能返回具有重复ID的行。我使用uuid(https://www.npmjs.com/package/uuid)在我的项目中，它就像一个魅力！

Answer 2

在此行中，keyExtractor={x=

尝试keyExtractor={x=

Answer 3

我最好的猜测是这一行正在生成重复的密钥。

keyExtractor= { x => x.id }