Question

我有一个简单的应用，该应用使用icanhazdadjoke API检索笑话。有一个搜索事件处理程序，它根据限制参数（默认值为15）来获取笑话。还有一个随机按钮，将限制设置为1的搜索方法调用。每次单击随机按钮时，都会出现相同的结果，但是-我该如何获取随机的单个搜索结果？

这是我的搜索处理程序：

  // Default parameter
  getJokes(limit = 15) {
    this.setState({ isFetchingJokes: true });

    fetch(
      `https://icanhazdadjoke.com/search?term=${
        this.state.searchTerm
      }&limit=${limit}`,
      {
        method: 'GET',
        headers: {
          Accept: 'application/json'
        }
    })
      .then(response => response.json())
      .then(json => {
        const jokes = json.results;
        this.setState({
          jokes,
          isFetchingJokes: false
        })
      });
  };

单击随机按钮时，搜索处理程序的限制为1（它作为属性传递给呈现的组件上的道具，该组件来自另一个文件：onRandomize={() => this.getJokes(1)}）

完整代码： App.js retrieval-form.js

Answer 1

使用api请求，您只能获取所有数组，并且可以使用此代码随机选择

var joke = jokes[Math.floor(Math.random()*jokes.length)];

Answer 2

您可以通过两种方式获得随机的单个结果

您必须将结果随机分配到后端，然后限制为1。

2。通过使用从数组中随机设置一个的函数

 randomJoke(arr) {
    var joke = arr[Math.floor(Math.random()*arr.length)];
    this.setState({jokes: [joke] });
 }

从API搜索中获取随机结果

2 个答案: