Отображение данных Dynami c в методе рендеринга - PullRequest
Новая
       12

Отображение данных Dynami c в методе рендеринга

0 голосов
/ 16 апреля 2020

Мне нужно создать карту, которая динамически создается путем заполнения данных из API. Я могу получить эти данные, но не могу показать представление в методе рендеринга. Пожалуйста, помогите мне исправить мой код.

Ниже приведен мой компонент класса, где я использую ax ios для получения данных формы, затем я перебираю, чтобы получить ключ и значение и назначить его нужной карте для отображения. Теперь я не вижу карты вообще. 

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;

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020 
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) => {
          this.setState({ users: response.data });
        })
        .catch((error) => {
          console.log(error);
        });
    }

    render() {
      return (
          <div className="cards">
              {this.state.users?.map((user, id) => (
                  <div className="col-md-4" key={user.key}>
                      <div className="card">
                        <p>Data {id}</p>
                        <h1>{user.key}</h1>
                        <p>{user.value}</p>
                      </div>
                    </div>
              )}
          </div>
      );
    }
  }

  export default Cards;
0 голосов
/ 16 апреля 2020

Не рекомендуется добавлять теги 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;
...