Question

所以我有一个像这样的对象，

return Object.keys(this.state.visits).map(function(key, index){
            console.log(key);
            return (
                <View style={{height: 40, flexDirection: 'row'}}>
                    <Text style={{marginLeft: 10,marginTop: 10, fontWeight:'500'}}>{key}</Text>
                </View>
            );
        });

我使用了以下代码来迭代它，

filename

这个代码会打印出来的密钥＆＃39;完美地在console.log中，但在视图中，只打印了最后一个日期，我也在控制台中出现错误，如此，

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;   丙

检查+-------------------------------------------------------------+ | Date1 | +-------------------------------------------------------------+ | Record 1 | +-------------------------------------------------------------+ | Record 2 | +-------------------------------------------------------------+ +-------------------------------------------------------------+ | Date 2 | +-------------------------------------------------------------+ | Record 1 | +-------------------------------------------------------------+的渲染方法。看到   https://facebook.github.io/react/docs/lists-and-keys.html#keys了解更多信息。

我想要实现的目标如下，

Path to solution or packages.config: DirectoryName/AppServer/.nuget/NuGet.Config
Path to NuGet.config: DirectoryName/AppServer/.nuget/NuGet.Config
Installation type: Restore
NuGet arguments: -PackagesDirectory DirectoryName\SDK\NuGet\packages
NuGet Version: 3.3.0

但我被困在日期部分，所以无法继续。

Answer 1

我建议你看看https://facebook.github.io/react-native/docs/sectionlist.html，它很适合你对基于部分的数据集的需要。

CountryId

如果您的部分中的列表行非常相似，则上述方法很有效。通过传入每个部分<SectionList renderItem={({item}) => <ListItem title={item.title} />} // Your record component here. renderSectionHeader={({section}) => <H1 title={section.title} />} // Your date component here. sections={[ // homogenous rendering between sections {data: [...], title: ...}, {data: [...], title: ...}, {data: [...], title: ...}, ]} />方法，您还可以为不同的部分设置不同的组件：

renderItem

此外，关于<SectionList sections={[ // heterogeneous rendering between sections {data: [...], title: ..., renderItem: ...}, {data: [...], title: ..., renderItem: ...}, {data: [...], title: ..., renderItem: ...}, ]} />的警告是因为您实际上是在返回一个类似数据的数组，并且React希望您传递Each child in an array or iterator should have a unique "key" prop.道具以帮助它在渲染和更新时更好地识别组件渲染。您应该传递一个key道具作为重复组件的根，例如key

Answer 2

你应该为<View />内的“key”赋予唯一的价值。

return Object.keys(this.state.visits).map(function(key, index){
            return (
                // Key prop
                <View key={key}>
                    <Text style={{marginLeft: 10,marginTop: 10, fontWeight:'500'}}>{key}</Text>
                    {func_record()} // return map for records
                </View>
            );
        });
...
render() {
     return (<View style={{ flex: 1 }}>
         {your_func_name()}
     </View>);
}

如何循环遍历数组对象创建反应原生视图？

2 个答案: