时间戳

首页 > 解决方案 > 在渲染方法中显示动态数据

javascript - 在渲染方法中显示动态数据

问题描述

我需要创建一个通过从 API 填充数据而动态创建的卡片。我能够获取此数据，但无法在渲染方法中显示视图。请帮助我修复我的代码。

下面是我的类组件，我在其中使用 axios 获取表单数据，然后我遍历以获取键和值并将其分配给我要显示的卡。现在我似乎根本看不到卡片。

class Cards extends Component {
constructor(props) {
    super(props);
    this.state = { users: [] }
}

componentDidMount() {
    let formData = new FormData();

    const username = localStorage.getItem("username");

    formData.append("username", username);

    const config = {
      headers: { "content-type": "multipart/form-data" },
    };

    axios
      .post("http://", formData, config)
      .then((response) => {
          let rows = []
          let count = 0
        for (var i = 0; i < response.data.length; i++) {
            console.log("data: "+response.data[i].key);

            rows.push(<div className="col-md-4">
                        <div className="card">
                            <p>Data {count++}</p>
                            <h1>{response.data[i].key}</h1>
                            <p>{response.data[i].value}</p>
                        </div>  
                    </div>
                )
                this.setState({ users: rows })
        }
      })
      .catch((error) => {
        console.log(error);
      });
}
render() { 
    return ( 
        <div className="cards">
            {this.users}
        </div>
     );

}
}

export default Cards;

标签： javascriptreactjsreact-nativefor-loop

解决方案

将 HTML 标记添加到状态中不是一个好习惯。相反，将您的 API 响应添加到状态并使用render()以正确的 HTML 标记呈现数据。

class Cards extends Component {
  constructor(props) {
      super(props);
      this.state = {
        response: {},
      };
  }

  const apiCall = () => {
    let formData = new FormData();
    const username = localStorage.getItem("username");

    formData.append("username", username);

    const config = {
      headers: { "content-type": "multipart/form-data" },
    };
    axios
    .post("http://", formData, config)
    .then((response) => {
        this.setState({ response: response });
    }).catch((error) => {
      console.err(error);
    });
  }
  componentDidMount() {
    apiCall();
  }
  render() {
    const { response } = this.state;
      return (
          <div className="cards">
            {response.data.map((item, index) => {
              <div key={`user-${index}`} className="col-md-4">
                <div className="card">
                  <p>Data {index+1}</p>
                  <h1>{item.key}</h1>
                  <p>{item.value}</p>
                </div>
              </div>
            })}
          </div>
       );
  }
}
export default Cards;

推荐阅读