如何在React中循环此状态?

时间:2019-12-14 18:08:44

标签: reactjs loops dictionary

我尝试使用.map循环状态,但是它没有用(在控制台中看不到我的日志)...

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

请告诉我这是什么错误...

我在这里有自己的状态(请参阅控制台中的日志):

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
  }

这是我的控制台日志:

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: "#"

编辑:这是我的渲染:

  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>
    );
  }

他不显示我的卡,并且如果我用console.log替换它,它也不会在我的控制台中显示

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

您需要在componentDidMount内部进行操作,并更新状态,如下所示:

using QuickFix;

您不应该像这样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> ); } }

直接更改状态