Question

我试图在一段时间内渲染组件，我想使用*:（不是说它必须使用那种方法，但我不知道其他方法）而且我不知道为什么，我必须做错了，但它不会渲染组件

代码：

setTimeout()

Answer 1

你可以尝试类似的东西：

constructor(props) {
 super(props)
 this.state = {
  showText: false
 }
}

componentDidMount() {
 setTimeout(() => {
   this.setState({ showText: true })
 }, 5000)
}

render() {
 const { showText } = this.state

 return (
  <div>
   <Image source={require('./assets/img/1.gif')} />
   {showText && <Text>some text</Text>}
  </div>
 )
}

Answer 2

好的我通过在状态中创建标志来修复它，将其设置为false并创建处理程序以使用true将其设置为setTimeout()并将其附加到之前调用的其他函数。

代码：

  state = {
   animationFlag: false
  }

  flagHandler = () => {
    setTimeout(() => {
      this.setState({
        animationFlag: true
      })
    }, 4000)
  }

    <View>
     <Image source={require('./assets/img/1.gif')}/>
       {
       this.state.animationFlag ? <Text>some text</Text> : null
       }            
   </View>

Answer 3

这是使用useEffect的解决方案。

  // import useEffect and useState
  import React, { useEffect, useState } from 'react';
  ... your other code 
  // setTimeout is a side effect and must exist inside of a useEffect hook. Use it to update state. Then conditionally render your component.
  const YourComponent = () => {

    const [state, setState] = useState(false);

    useEffect(() => setTimeout(()=>setState(true), 5000), []);

    return (
      <div>
        <View>
          <Image 
            source={require('./assets/img/1.gif')} 
          />
            {state === true ? <Text>some text</Text> : null}            
        </View>  
      </div>
    )
  }

setTimeout方法中的render组件无法正常工作

3 个答案: