node.js - 警告:列表中的每个孩子都应该有一个唯一的“key”属性。%s%s
问题描述
向整个社区问好。
我正在做一个项目,我所在城市的餐馆可以通过应用程序放置菜肴并生成订单。
但是我在执行项目时遇到了错误。
这是我的错误。
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 在我的前端做这个项目。
**我的代码是这个 - 我的前端 **
应用程序.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
}
});
获取我的项目的 url。
使用Fecth.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);
});
});
模型.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
const Meal = mongoose.model('Meal', new Schema({
name: String,
desc: String,
}));
module.exports = Meal;
我不知道为什么这些信息重复了我。
我很感激你能给我的合作。
谢谢你。
马里奥
解决方案
我最好的猜测是这条线正在产生重复的密钥。
keyExtractor= { x => x.id }
推荐阅读
- python - 用 selenium 下载“401 Unauthorized”视频
- ajax - 局部视图中带有模态绑定的 Ajax 模态弹出窗口
- prolog - WAM Prolog 有符号表吗?
- javascript - 无法在 Firefox 上并排放置 div,但可以在 Chrome 上使用
- c++ - glEnableVertexArrayAttrib 抛出无效大小
- swift - 如何在 MacOS 上覆盖 NSButton 的 mouseDragged() 函数?
- c# - Linux 上 ASP.Net Core Web API 中未处理的异常
- javascript - 错误:无效的 LatLng 对象:(54,未定义)
- python-3.x - 如何将列表中的元素拆分为数据框的不同列?
- python - 如何解决图像的非最大抑制