如何在 React 中循环这个状态？

Question

I try to loop my state with a .map but it didn't work (I don't see my log in the console) ...

{this.state["cards"].map(card => console.log(card.title))}

Please tell me what's the error...

I have my state here (which a see the log in my console) :

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: []
    };
    fs.readdir(testFolder, (err, files) => {
      files.forEach(file => {
        this.state.cards.push({
          title: "Test1",
          pic:
            "https://seeklogo.com/images/C/confluence-logo-D9B07137C2-seeklogo.com.png",
          content: "Content",
          link: "#"
        });
      });
    });
    console.log(this.state); // I see this one
  }

Here is my console log :

Object {cards: Array[2]}
  cards: Array[2]
    0: Object
      title: "Test1"
      pic: "https://seeklogo.com/images/C/confluence-logo-D9B07137C2-seeklogo.com.png"
      content: "Content"
      link: "#"
    1: Object
      title: "Test1"
      pic: "https://seeklogo.com/images/C/confluence-logo-D9B07137C2-seeklogo.com.png"
      content: "Content"
      link: "#"

EDIT : Here is my render :

  render() {
    return (
      <div>
        <div className="container-fluid text-center">
          <h2 className="h2_title">Hi.</h2>
        </div>
        <div className="main">
          <ul className="cards">
            {this.state["cards"].map(cards => (
              <Card
                key={cards.title}
                link={cards.link}
                title={cards.title}
                pic={cards.pic}
              />
            ))}
          </ul>
        </div>
      </div>
    );
  }

He doesn't display my cards and if I replace it by console.log it didn't display it in my console

Thanks for helping me !

Answer 1

You need to make your operations inside the componentDidMount and update the state like this:

import React, {Component} from "react";

export default class Home extends Component {
    constructor(props) {
      super(props);
      this.state = {
        cards: [],
        loading: true
      };
    }

    componentDidMount() {

        let cards = [];

        fs.readdir(testFolder, (err, files) => {
            files.forEach(file => {
              cards.push({
                title: "Test1",
                pic:
                  "https://seeklogo.com/images/C/confluence-logo-D9B07137C2-seeklogo.com.png",
                content: "Content",
                link: "#"
              });
            });

            this.setState({
                cards,
                loading: false
            })
          });

    }


    render() {

        const {cards, loading} = this.state;

        if (loading) {
            return (
                <div>Getting Files, please wait...</div>
                )
        }

        if (cards.length === 0) {
            return (
            <div>No files found</div>
            )
        }

        return (
          <div>
            <div className="container-fluid text-center">
              <h2 className="h2_title">Hi.</h2>
            </div>
            <div className="main">
              <ul className="cards">
                {cards.map(card => (
                  <Card
                    key={card.title}
                    link={card.link}
                    title={card.title}
                    pic={card.pic}
                  />
                ))}
              </ul>
            </div>
          </div>
        );
      }
}

You shouldn't directly change the state like this this.state.cards.push