Как отобразить POST data в react?

Question

[Wasya UK]

Как правильно рендерить все твиты?

Вот, что получилось:

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class Tweet {
  render() {
    return (
      <article>
        <a href="#">
          <img src="https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/e/ea/4801e9af45ef7170bs8d38edd0e1f1e31--anime-guys-anime-manga.jpg/revision/latest?cb=20171205180246" alt="HUI" />
        </a>
      </article>
    );
  }
}

class Capture extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: ''
      }
    }

    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onFormSubmit(e) {
    e.preventDefault()

    axios.post('/', {
      username: this.state.form.username
    })
    .then(({data: tweets}) => {
      tweets.forEach(tweet => {
        ReactDOM.render(<Tweet />, document.getElementById("app"));
      });
    })
    .catch(console.error);
  }

  handleChange(event) {
    let form = this.state.form;
    form.username = event.target.value;
    this.setState({
      form: form
    });
  }

  render () {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <p className="leadform-component-container">
            <input type="text" placeholder="Username" required onChange={this.handleChange} />
          </p>
          <p className="leadform-component-container">
            <input type="submit" value="Press me" />
          </p>
        </form>
      </div>
    )
  }
}

ReactDOM.render(<Capture />, document.getElementById("app"));

Comments

[Wasya UK]

Роман Александрович,

Answer 1

[Антон Спирин]

В самом простом варианте:

class Capture extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: '',
      },
      tweets: [],
    }

    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onFormSubmit(e) {
    e.preventDefault()

    axios.post('/', {
      username: this.state.form.username
    })
    .then(({data: tweets}) => {
      this.setState({ tweets });
    })
    .catch(console.error);
  }

  handleChange(event) {
    const { form } = this.state;

    form.username = event.target.value;

    this.setState({ form });
  }

  render () {
    const { tweets } = this.state;

    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <p className="leadform-component-container">
            <input
              type="text"
              placeholder="Username"
              required
              onChange={this.handleChange}
            />
          </p>
          <p className="leadform-component-container">
            <input type="submit" value="Press me" />
          </p>
        </form>
        <div>
          {tweets.map((tweet, i) => <Tweet key={i} tweet={tweet} />)}
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Capture />, document.getElementById("app"));

Если у твита есть id или любое другое уникальное поле, то следует передавать его в свойство key вместо индекса массива.

Comments

[Wasya UK]

Странно, но у меня появилась ошибка: Uncaught TypeError: Cannot read property 'map' of undefined
в чем может быть проблема? ( там массив, но мап не работает )

[Антон Спирин]

Wasya UK, ошибся по невнимательности. Не туда tweets в state добавил. Правильно так:

constructor(props) {
    super(props);
    this.state = {
      form: {
        username: '',
      },
      tweets: [],
    }

    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

Ответ поправил.

[Wasya UK]

Антон Спирин, Спасибо большое