从从 json 获取的数据中一次显示一张图像

Question

我是 React 的初学者，尝试一次显示一个图像。目前使用这个 api https://salty-cove-08526.herokuapp.com/api/countries?format=json 一次发送 3 张图像。我正在使用 axios 获取图像并使用 map {this.state.countries.map(country => <img src={country.photo}/>)} 但是 div img-wrapper 中的这个命令一次显示所有 3 个 plz hlep

reactjs

class form extends Component{
    constructor(props){
        super(props);

        this.state={
            answer:'',
            countries:[]
        }
        this.handleChange=this.handleChange.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }

    componentDidMount(){
        axios.get('https://salty-cove-08526.herokuapp.com/api/countries?format=json')
            .then(res=>{
                this.setState({ countries:res.data});
                
            })
    }
       
    }
    render(){
 
        return (
            <div>
                <section className="login">
                    <div className="loginContainer">
                        <div className="heading">
                            Guess the countries
                        </div>
                        <div className="img-wrapper">
                            {this.state.countries.map(country => 
                                 <img src={country.photo}/>
                            )}
                        </div>

json

[
  {
    "id": 6,
    "name": "canada",
    "photo": "https://en.wikipedia.org/wiki/India#/media/File:Flag_of_India.svg",
    "fact": "sdsds",
    "capital": "sdsdsd",
    "hint_1": "sdsd",
    "hint_2": "sdsdsd"
  },
  {
    "id": 2,
    "name": "usa",
    "photo": "https://en.wikipedia.org/wiki/India#/media/File:Flag_of_India.svg",
    "fact": "ddc",
    "capital": "new york",
    "hint_1": "kuch bhi",
    "hint_2": "kljn;kj"
  },
  {
    "id": 3,
    "name": "china",
    "photo": "https://en.wikipedia.org/wiki/India#/media/File:Flag_of_India.svg",
    "fact": "ddfdf",
    "capital": "k k",
    "hint_1": "jnjn",
    "hint_2": "jknkjn"
  }
]

Answer 1

您需要确定要显示的图像。在下面的示例中，我将当前图像的索引保持在状态，然后仅显示该索引处的图像：

const images = [
  {
    "id": 6,
    "name": "canada",
    "photo": "https://en.wikipedia.org/wiki/India#/media/File:Flag_of_India.svg",
    "fact": "sdsds",
    "capital": "sdsdsd",
    "hint_1": "sdsd",
    "hint_2": "sdsdsd"
  },
  {
    "id": 2,
    "name": "usa",
    "photo": "https://en.wikipedia.org/wiki/India#/media/File:Flag_of_India.svg",
    "fact": "ddc",
    "capital": "new york",
    "hint_1": "kuch bhi",
    "hint_2": "kljn;kj"
  },
  {
    "id": 3,
    "name": "china",
    "photo": "https://en.wikipedia.org/wiki/India#/media/File:Flag_of_India.svg",
    "fact": "ddfdf",
    "capital": "k k",
    "hint_1": "jnjn",
    "hint_2": "jknkjn"
  }
];

const PhotoDisplay = () => {
  const [currentImageIndex, setCurrentImageIndex] = React.useState(0);
  
  const handleNextClick = () => {
    setCurrentImageIndex(currentImageIndex + 1);
  };
  
  const currentImage = images[currentImageIndex];
  
  console.log(currentImage);
  
  return <div>
    <button onClick={handleNextClick}>Next Image</button>
    <img src={currentImage.photo} />
  </div>
}

ReactDOM.render(
  <PhotoDisplay />,
  document.getElementById('root')
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>