onClick不'；尝试呈现时无法工作：reactjs，基本API获取

我正在尝试使用一个名为GENERATE的按钮执行一个基本的API获取，并在单击时显示该信息。现在它应该做的就是显示我收到的json中的第一个url

一旦实现了这一点，我希望它在每次单击时显示下一个url

App.js

import React, { Component } from 'react';

import { ThemeProvider, createToolkitTheme } from 'internaltools/theme';
import { AppHeader } from 'internaltools/app-header';


const LIGHT_THEME = createToolkitTheme('light');
const DARK_THEME = createToolkitTheme('dark');
const API = 'https://hn.algolia.com/api/v1/search?query=';
const DEFAULT_QUERY = 'redux';

class App extends Component {
  constructor(props) {
    super(props);
      this.state = {
        hits: [],
        isLoading: false,
        error: null,
      };
  }

  componentDidMount(){
    this.setState({ isLoading: true });

    fetch(API + DEFAULT_QUERY)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong with the API...');
        }
      })
      .then(data => this.setState({ hits: data.hits[0], isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }


  render() {
    const { hits, isLoading, error } = this.state;

    return (
        <>
          <button onClick={hits.url}>GENERATE</button>
        </>
    );
  }
}

import React，{Component}来自'React'；
从“internaltools/theme”导入{ThemeProvider，createToolkitTheme}；
从“internaltools/app header”导入{AppHeader}；
常量灯光主题=createToolkitTheme（“灯光”）；
const DARK_THEME=createToolkitTheme（'DARK'）；
常数API=https://hn.algolia.com/api/v1/search?query=';
const DEFAULT_QUERY='redux'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
点击次数：[]，
孤岛加载：false，
错误：null，
};
}
componentDidMount（）{
this.setState（{isLoading:true}）；
获取（API+默认查询）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'API出现问题…'）；
}
})
.then（data=>this.setState（{hits:data.hits[0]，isLoading:false}））
.catch（error=>this.setState（{error，isLoading:false}））；
}
render（）{
const{hits，isLoading，error}=this.state；
返回(
生成
);
}
}

---

请帮我找出为什么我的按钮坏了。以及如何在每次单击时迭代url，即在每次单击时显示json中的下一个url。谢谢。

您应该将函数名传递给onClick处理程序。然后在该函数中，您可以访问所需的数据

enter code here
import React, { Component } from 'react';

import { ThemeProvider, createToolkitTheme } from 'internaltools/theme';
import { AppHeader } from 'internaltools/app-header';


const LIGHT_THEME = createToolkitTheme('light');
const DARK_THEME = createToolkitTheme('dark');
const API = 'https://hn.algolia.com/api/v1/search?query=';
const DEFAULT_QUERY = 'redux';

class App extends Component {
  constructor(props) {
  super(props);
  this.state = {
    hits: [],
    isLoading: false,
    error: null,
    hitsCount: 0
  };
  this.handleClick = this.handleClick.bind(this);
}

componentDidMount(){
  this.setState({ isLoading: true });

  fetch(API + DEFAULT_QUERY)
    .then(response => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error('Something went wrong with the API...');
      }
    })
    .then(data => 
       this.setState({ hits: data.hits, hitsCount: 0 ,isLoading: false 
    }))
     .catch(error => this.setState({ error, isLoading: false }));
    }

  handleClick(){
     this.setState(prevState => ({ hitsCount: prevState.hitsCount + 1 
     }));
  }

  render() {
    const { hits, hitsCount, isLoading, error } = this.state;

    return (
      <>
         <div>
           count: {hitsCount}
           url: {hits[hitsCount].url}
         </div>
         <button onClick={this.handleClick}>GENERATE</button>
      </>
    );
  }
}

在此处输入代码
从“React”导入React，{Component}；
从“internaltools/theme”导入{ThemeProvider，createToolkitTheme}；
从“internaltools/app header”导入{AppHeader}；
常量灯光主题=createToolkitTheme（“灯光”）；
const DARK_THEME=createToolkitTheme（'DARK'）；
常数API=https://hn.algolia.com/api/v1/search?query=';
const DEFAULT_QUERY='redux'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
点击次数：[]，
孤岛加载：false，
错误：null，
Hitsunt:0
};
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
this.setState（{isLoading:true}）；
获取（API+默认查询）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'API出现问题…'）；
}
})
。然后（数据=>
this.setState（{hits:data.hits，hitsCount:0，isLoading:false
}))
.catch（error=>this.setState（{error，isLoading:false}））；
}
handleClick（）{
this.setState（prevState=>（{hitsunt:prevState.hitsunt+1
}));
}
render（）{
const{hits，hitscont，isLoading，error}=this.state；
返回(
计数：{hitsunt}
url:{hits[hitsunt].url}
生成
);
}
}

考虑一下：

通读代码中的注释以获取更新

class App extends Component {
  constructor(props) {
    super(props);
      this.state = {
        hits: [],
        currentHit: 0, //add a state currentHit to hold the url that is displayed by now
        isLoading: false,
        error: null,
      };
  }

  componentDidMount(){
    this.setState({ isLoading: true });

    fetch(API + DEFAULT_QUERY)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong with the API...');
        }
      })
      .then(data => this.setState({ hits: data.hits, isLoading: false })) //Make hits array holding all the hits in the response instead of only the first one
      .catch(error => this.setState({ error, isLoading: false }));
  }

  handleClick = () => {
    this.setState(prevState => ({
      currentHit: prevState.currentHit + 1,
    }));
  }


  render() {
    const { hits, isLoading, error, currentHit } = this.state;
    // pass the handleClick function as a callback for onClick event in the button.
    return (
        <>
          <p>{hits[currentHit].url}<p/>
          <button onClick={this.handleClick.bind(this)}>GENERATE</button>
        </>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
点击次数：[]，
currentHit:0，//添加一个状态currentHit以保存当前显示的url
孤岛加载：false，
错误：null，
};
}
componentDidMount（）{
this.setState（{isLoading:true}）；
获取（API+默认查询）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'API出现问题…'）；
}
})
.then（data=>this.setState（{hits:data.hits，isLoading:false}））//使hits数组保存响应中的所有命中，而不仅仅是第一个命中
.catch（error=>this.setState（{error，isLoading:false}））；
}
handleClick=（）=>{
this.setState（prevState=>({
currentHit:prevState.currentHit+1，
}));
}
render（）{
const{hits，isLoading，error，currentHit}=this.state；
//将handleClick函数作为按钮中onClick事件的回调传递。
返回(
{hits[currentHit].url}

生成
);
}
}

您需要传递onClick处理程序函数来更新状态值

这里有一个codesandbox，它将hits数组与当前索引一起存储在状态中，还有一个处理程序，它只是简单地增加索引

---

这是工作代码，每次单击都会显示下一个url。

如果您想从数组中附加url，handleChange方法也可以工作。或者您可以在这个函数中增加索引

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    data: [],
    index: 0
  };
  componentDidMount() {
    this.setState({ isLoading: true });

    fetch("https://reqres.in/api/users")
      .then(response => {
        if (response) {
          return response.json();
        } else {
          throw new Error("Something went wrong with the API...");
        }
      })
      .then(data => this.setState({ data: data.data }))
      .catch(error => this.setState({ error }));
  }
  handleChange = () => {
    let i =
      this.state.index < this.state.data.length ? (this.state.index += 1) : 0;
    this.setState({ index: i });
  };
  render() {
    return (
      <div className="App">
        <span>
          {this.state.data.length && this.state.data[this.state.index].avatar}
        </span>
        <button onClick={this.handleChange}>GENERATE</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展了React.Component{
状态={
数据：[]，
索引：0
};
componentDidMount（）{
this.setState（{isLoading:true}）；
取回（“https://reqres.in/api/users")
。然后（响应=>{
如果（答复）{
返回response.json（）；
}否则{
抛出新错误（“API出现问题…”）；
}
})
.then（data=>this.setState（{data:data.data}））
.catch（error=>this.setState（{error}））；
}
handleChange=（）=>{
让我=
this.state.index

按钮的作用是什么？单击时会发生什么情况？onClick应该有一个函数，而不是一个属性，您可以在其中编写逻辑来迭代url。在哪里显示url？此解决方案不会迭代hit