0
votes

Div ne s'affiche pas mais les nombres dans React

Voici l'interface utilisateur, dans laquelle chaque boîte que j'essaie d'afficher après 1 seconde de retard - (Box1, 1 sec delay, Box2, 1 sec delay, Box3 ..so on)

Au lieu de cela, j'obtiens -

Mon code React et dites-moi ce que je fais faux ici & pourquoi il affiche des nombres -

const CreateBox = (props) => {
  return (
    <>
    {/*<div className="box">{props.num}</div>*/}
    <div className="box"></div>
    </>
  )
} 

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,4,5,6,7,8,9,10].map((item) => {
          return setTimeout(() => {
            // return (<CreateBox num={item} />)
            return (<CreateBox />)
          }, 1000)
        })
      }
    </div>
  )
}

const root = document.querySelector('#root')
ReactDOM.render(<App />, root)

Codepen - https://codepen.io/anon/pen/pBLPMY

javascript reactjs html css react-dom

0 commentaires

4 Réponses :

0
votes

N'utilisez pas setTimeout pendant la boucle. Au lieu de cela, définissez le minuteur à l'intérieur du composant CreateBox à l'aide de state. Si vous supprimez le délai, vous pouvez voir les cases. Pour gérer le délai, passez l'index * 1000 comme minuterie pour chaque élément.

0 commentaires

3
votes

Au lieu de créer un nouveau délai d'expiration pour chaque élément du tableau à chaque rendu, vous pouvez créer un intervalle dans componentDidMount et incrémenter un nombre dans votre état jusqu'à ce qu'il atteigne 10 et utiliser ce nombre dans votre à la place.

Exemple

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

class App extends React.Component {
  state = {
    count: 0
  };

  componentDidMount() {
    const interval = setInterval(() => {
      this.setState(
        ({ count }) => ({ count: count + 1 }),
        () => {
          if (this.state.count === 10) {
            clearInterval(interval);
          }
        }
      );
    }, 1000);
  }

  render() {
    return (
      <div className="app">
        <h3>App</h3>
        {Array.from({ length: this.state.count }, (_, index) => (
          <CreateBox key={index} num={index + 1} />
        ))}
      </div>
    );
  }
}

const CreateBox = props => {
  return <div className="box">{props.num}</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

0 commentaires

0
votes

class CreateBox extends React.Component {
  state = {
    opacity: 0
  }

  constructor(props){
    super(props)
  }
  
  componentDidMount(){
    setTimeout(()=> this.setState({opacity: 1}),`${this.props.time}000`)  
  }
  
  render() {
    console.log(this.props)
    return (
      <div style={this.state} className="box">{this.props.num}</div>
    )
  }
};

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,'w',5,6,7,8,9,10].map((item, index) => <CreateBox num={item} time={index}/>)
        
      }
    </div>
  )
}

const root = document.querySelector('#root')
ReactDOM.render(<App />, root)

0 commentaires

3
votes

const CreateBox = (props) => {
  return (
   <div className="box">{props.num}</div>
  )
} 

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,4,5,6,7,8,9,10].map((item) => {              
             return (<CreateBox num={item} />)
        })
      }
    </div>
  )
}
const root = document.querySelector('#root')
ReactDOM.render(<App />, root)

0 commentaires