Как повторно сделать или обновить компонент после componentdidmount - PullRequest
Новая
       58

Как повторно сделать или обновить компонент после componentdidmount

0 голосов
/ 24 октября 2019

Я извлекаю данные (массив объектов) из моего бэкэнда, используя мои функции, которые вызываются в componentdidmount. Я знаю, что рендеринг происходит за до componentdidmount.

Я установил начальное состояние на ноль, и я вижу, что данные действительно поступают с помощью cosole.log (), но как это сделать? Я использую эти данные в моем рендере?

Я пытаюсь использовать массив объектов в опциях для моего раскрывающегося списка, но, похоже, он не обновляется после изменений моего состояния.

Вот некоторый связанный код: 

class PaintingPhotoForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      apiPaintingPhotosEndpoint: `/api/paintings/photos?`,
      paintingPhotos: null,
    };
  }

  loadUniqueTitleIds = (clickedEndpoint) => {

    let endpoint = this.state.apiPaintingPhotosEndpoint

    if (clickedEndpoint !== undefined){
        endpoint = clickedEndpoint
    }

    let lookupOptions = {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      }
    }; 

    const csrfToken = cookie.load("csrftoken");
    if (csrfToken !== undefined) {
      lookupOptions["credentials"] = "include";
      lookupOptions["headers"]["X-CSRFToken"];
    }

    fetch(endpoint, lookupOptions)
      .then(response => {
        return response.json();
      })
      .then(responseData => {
        this.setState({
          paintingPhotos: responseData,
        });
      })
      .catch(error => {
        console.log("error", error);
      });
  }

  componentDidMount() {
    this.loadUniqueTitleIds()
  }

  render() {

    const {paintingPhotos} = this.state;
    console.log(paintingPhotos)

    return (
      <form onSubmit={this.handleSubmit} ref={(el) => this.paintingCreateForm = el}>

       <div>
          <label for="title">Title ID</label>
          <select id="title"
                  name="title"
                  className=""
                  onChange={this.handleInputChange}
                  value={title_id}
                  // required="required"
                  >
                  {
                    paintingPhotos ==! null ? 
                    paintingPhotos.map((anObjectMapped, index) => 
                      <option value={anObjectMapped.title} >{anObjectMapped.title}</option>
                      )
                    : ""
                  }
          </select>

        </div>
        <button className="btn btn-primary">Save</button> 
        <button className={`btn btn-secondary`} onClick={this.clearForm}>
          Clear
        </button>
      </form>
    );
  }
}

Большое спасибо заранее!

1 Ответ

2 голосов
/ 24 октября 2019

Ваш рендер неправильно реализует строгое неравенство. Вы используете ==!, но оно должно быть !==: 

{
  paintingPhotos !== null ? 
    paintingPhotos.map((anObjectMapped, index) => (
      <option value={anObjectMapped.title}>{anObjectMapped.title}</option>
    ) : ""
}
...