React Native:如何使用Hooks在列表顶部添加新元素并使用map()渲染?

Question

我试图添加一个新的数据，并把它放在我从API得到的数组的顶部。问题是新数据仍然在数组的末尾，即使console.log输出所有数据，它也只呈现新数据而不是所有数据。我知道问题不在于样式，因为如果我不添加新数据，它就能正确渲染。

我是这样添加新数据的:

fetch()
**********
.then((result) => {
setListTab(result);
setListTab(listTab => [listTab, {id: 18, name: "All", ...listTab}]);
console.log(listTab);

<ScrollView 
showsHorizontalScrollIndicator={false} 
horizontal={true}>
{listTab.map(item => (
<TouchableOpacity key={item.id} 
activeOpacity={1}> 
<Text>{item.name}</Text>
</TouchableOpacity>
))}

Answer 1

首先，你不应该使用ScrollView来实现列表，请使用FlatList。

你的逻辑(根据你发布的代码)是不对的。要向数组的第一个对象添加新对象，可以很好地使用扩展操作符。

示例代码:https://jsfiddle.net/rzhybtdj/

let friendsList = [{"id":343,"name":"Satheesh"}, {"id":342,"name":"Kavitha"}];
// something happened and I have a new friend now.
// To add it to the firendsList array I do this
const newFriend = {"id":341,"name":"Yuvan"};
friendsList = [newFriend, ...friendsList];

现在来看看你的代码，看看它应该如何做你想要的。

fetch()
.then((result) => {
const newList = [...result, ...listTab]; //considering result being an array, if an object then [result, ...listTab]
setListTab(newList);
console.log(newList);

让我知道这是否适合你。