0

当我在页面中点击一个航点时，我正在调用一个函数。该函数在调用 setState 后记录状态，这表明状态已更新到，{visible: true}但是在 React Dev Tools 中，它显示状态仍然为 false。由于状态仍为 false，因此 Animated 组件不可见。如果我visible使用 React Dev Tools 更改为 true，则 Animated 组件变得可见。

我认为我的问题是因为我的 setState 没有在函数调用之外更新组件状态，这可以解释为什么记录组件的状态在控制台中显示为已更新，但没有触发重新渲染，也没有Animated通过状态属性。

这是我正在处理的组件

import React, { Component } from 'react'

import { Waypoint } from  'react-waypoint'
import { Animated } from 'react-animated-css'

export default class About extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };

    this.OnEnter = this.onEnter.bind(this);
  }


  onEnter({ currentPosition }){
        this.setState({
            visible: true
        });
        console.log(this.state);
  };

  render() { 
    return (
            <Waypoint onEnter={this.onEnter}></Waypoint>
            <Animated animationIn="fadeInUp" isVisible={this.state.visible}>
                <h2 className="mb-4">About Me</h2>
                <p>A small river named Duden flows by their place and supplies it with the necessary nutrients.</p>
            </Animated>
    );
  }
}
4

1 回答 1

1

发表我的评论作为答案。

有一个拼写错误。

请将该行更新this.OnEnter = this.onEnter.bind(this);为this.onEnter = this.onEnter.bind(this);.

于 2019-12-28T23:49:50.713 回答