javascript - 状态没有更新

Question

我目前正在使用Flickr api制作简单图像轮播并面临我的状态没有得到 updated 的问题或rendered每当我点击按钮时。

这是我的index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

import Photo from './components/photo';

const urlArr = [];
const apiKey = "API";
const userId = "ID";
const url = `https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=${apiKey}&user_id=${userId}&format=json&nojsoncallback=1`;

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

    this.state = { urlArr: [] };

    axios.get(url)
    .then((photoData) => {
      _.forEach(photoData.data.photos.photo, (photo) => {
        urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`);
      });
      this.setState({ urlArr });
    });
  }

  render() {
    return (
      <div>
        <Photo urls={this.state.urlArr}/>
      </div>
    );
  }
};

ReactDOM.render(<App/>, document.querySelector('.container'));

这是我的photo.js

import React, { Component } from 'react';
import NextButton from './nextButton';
import PrevButton from './prevButton';

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

    this.state = { idx: 0 };
    this.nextImg = this.nextImg.bind(this);
  }

  nextImg() {
    this.setState({ idx: this.state.idx++ });
  }

  render() {
    if (this.props.urls.length === 0) {
      return <div>Image Loading...</div>
    }

    console.log(this.state);
    return(
      <div>
        <PrevButton />
        <img src={this.props.urls[this.state.idx]}/>
        <NextButton onClick={this.nextImg}/>
      </div>
    );
  }
}

export default Photo;

和我的nextButton.js(与prevButton.js相同)

import React from 'react';

const NextButton = () =>{
  return (
    <div>
      <button>next</button>
    </div>
  );
};

export default NextButton;

由于我对 React 还很陌生，所以我不太确定为什么我的 this.state.idx当我单击“下一步”按钮时，它没有得到更新(在我看来，它甚至没有触发 nextImg 函数)。如果有人能给我帮助或建议，我将非常感激。

提前致谢!!

Answer 1

更新您的 NextButton。在演示组件中使用该事件。

<NextButton next={this.nextImg}/>

NextButton 组件应该如下所示。

import React from 'react';
 const NextButton = (props) =>{
 return (<div>
    <button onClick={props.next}>next</button>
  </div>
 );
};