Question

我从API调用中获取数据。所以在componentWillMount我正在进行mappedDispatchToProps的API调用：fetchCats

class Cats extends Component {

  constructor(props){
    super();
    this.state = {
      toPass: 0
      }
  }


  componentWillMount() {
    this.props.fetchCats(this.state.toPass);
  };



  getCats(){    // <= Is this the proper way to update the state and call the api?

    this.setState({
      toPass: this.state.toPass+2     //<= increment by 2
    });

    this.props.fetchCats(this.state.toPass);
  }

  renData() {
    //map the array this.props.categories and return data
  }


  render(){

    const { categories } = this.props.categories
    console.log("CATEGORIES: ", categories);

    return (
     <View>
      <View>
      <Button
        name="PressMe"
        onPress={() => this.getCats()}>
      </Button>

      </View>
      <View>
        {this.reData()}
      </View>
     </View>
    )
  }

}

所以第一次页面加载toPass = 0时。单击按钮时，传递的值为2，但categories得到的结果相同。结果应该附加到Redux状态的类别数组。但是在第一次按下之后一切正常，除了toPass=0的结果的双重输入。我的getCats()功能出了什么问题？

非常感谢。

Answer 1

试试这个：

  getCats = () => {
    this.setState({
      toPass: this.state.toPass+2
    }, () => {this.props.fetchCats(this.state.toPass)});
  }

并使用onPress={this.getCats}

更改onPress行

更新状态和调度操作

1 个答案: