Question

我目前正在使用<div class="rightbutton fr"> <?php if(isset($records) && is_array($records) && count($records)>0): ?> <?php foreach($records as $r):?> </div> </div> <?php $form_attributes = array('name'=>'edit', 'id'=>'edit', 'enctype' => "multipart/form-data"); echo form_open('blogs/editblogs',$form_attributes); echo form_hidden('blog_id',$r->blog_id); ?> <div class="element"> <label for="blogtitle"><font color ="black">Blog Title</font></label> <textarea class="textarea" name="blog_title" id="myArea1" rows="4" cols="173"><?php echo $r->blog_title; ?></textarea> </div> <div id="dropdown" class="element"> <label for="category_name"><font color ="black">Category Name</font></label><span class="mandatory"><font color="red">*</font></span> <?php $categorylist['']='--Select Category --'; $category_id="id='category_id' multiple='multiple'"; echo form_multiselect('category_id[]',$categorylist,$r->category_id,$category_id); ?> <?php echo form_error('category_id', '<div class="error">', '</div>'); ?><br/><br/> </div> <?php endforeach;endif;?>制作简单图片轮播并面临一个问题，即每当我点击状态时我的状态都没有Flickr api或updated按钮。

这是我的 index.js

rendered

这是我的 photo.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'));

和我的 nextButton.js （与 prevButton.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;

因为我是 React 的新手，所以当我点击 next 按钮时，我不太清楚为什么我的import React from 'react'; const NextButton = () =>{ return ( <div> <button>next</button> </div> ); }; export default NextButton;没有得到更新（对我来说，它甚至不会触发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>
 );
};

Answer 2

问题在于这段代码：

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 });
});

this指的是axios.get回调范围，而不是组件。您可以定义另一个名为self的变量或更适合您的变量并调用self.setState()。

针对类似问题，请参阅此问题：Javascript "this" scope

州没有得到更新

2 个答案: