如何在 componentdidmount 后重新渲染或更新组件

Question

我正在使用在 componentdidmount 中调用的函数从我的后端提取数据（对象数组）。我知道渲染发生在 before componentdidmount.

我将初始状态设置为 null，我可以看到数据确实是使用 cosole.log() 传递过来的，但是我如何在我的渲染中使用这些数据？

我正尝试在我的 select 下拉列表中使用选项中的对象数组，但它似乎在我的状态更改后没有更新。

这里是一些相关的代码：

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

非常感谢！

Answer 1

您的渲染似乎错误地实现了严格的不平等。您正在使用 ==! 但它应该是 !==:

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

如何在 componentdidmount 后重新渲染或更新组件

How to re-render or update component after componentdidmount

render

setstate

reactjs

react-component

react-state