如何从 JSON 文件中随机获取并将其呈现为 FlatList？

Posted 2023-02-19

【中文标题】如何从 JSON 文件中随机获取并将其呈现为 FlatList？

【英文标题】：How to randomly fetch from a JSON file and render it into a FlatList?

【发布时间】：2019-11-29 02:03:49

【问题描述】：

我有一个从 JSON 文件中获取数据的应用程序。问题是，它从上到下获取数据。我希望它在 JSON 文件中随机获取。我将如何实现这一目标？

这就是我获取 JSON 的方式：

componentDidMount() 
    const url = ''
    this.setState( isLoading: true );  
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => 
      this.setState(
        dataSource: responseJson.product,
        dataBackup: responseJson.product,
        isLoading: false
      );
      )
    .catch((error) => 
      console.log(error)
    )
  

【问题讨论】：

数据的内容类型是什么？数组？

是的，没错

【参考方案1】：

当您阅读文件时，无法更改内容的顺序。 但是，一旦解析了 json，由于您的 product 键是一个数组，因此您可以在设置状态时打乱这个数组。

您可以使用此答案中的随机播放功能 How to randomize (shuffle) a javascript array?

或者，如果您使用 lodash，则有 shuffle 函数用于集合： https://lodash.com/docs/4.17.14#shuffle

你的最终代码是：

// import shuffle function from linked anwser,
// or with lodash :
import  shuffle  from "lodash";

// ...

componentDidMount() 
  const url = "";
  this.setState( isLoading: true );
  fetch(url)
    .then(response => response.json())
    .then(responseJson => 
      this.setState(
        dataSource: shuffle(responseJson.product),
        dataBackup: responseJson.product,
        isLoading: false
      );
    )
    .catch(error => 
      console.log(error);
    );