第一次加载页面时数据不显示答案

【问题标题】：Data not showing when load the page for the first time第一次加载页面时数据不显示
【发布时间】：2020-08-31 20:36:06
【问题描述】：

在我的反应应用程序中，我显示了选择选项。使用下面的教程，学习了 Filter Feature as Drop-down Filter Feature as Dropdown

问题 - 首次加载页面时，数据未根据选择选项显示。有什么方法可以在第一次加载页面时显示数据。

这里我附上了下面的图片和代码 - [

import React from 'react';
import ReactDOM from 'react-dom';




class App2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      courses: [],
      course: ""
    };

    this.handleChangeCourse = this.handleChangeCourse.bind(this);

  }


  handleChangeCourse(event) {
    this.setState({
      course: event.target.value
    });
  };


  getUnique(arr, comp) {
    const unique = arr
      .map(e => e[comp])
      .map((e, i, final) => final.indexOf(e) === i && i)
      .filter(e => arr[e])

      .map(e => arr[e]);

    return unique;
  }


  componentDidMount() {
    const courses = require("./courses.json");
    this.setState({
      courses: courses
    });
  }

  render() {


    const uniqueCouse = this.getUnique(this.state.courses, "tag");

    const courses = this.state.courses;
    const course = this.state.course;

    const filterDropdown = courses.filter(function(result) {
      return result.tag === course;
    });

    return ( <
      div >
      <
      label >
      Select -
      <
      select value = {
        this.state.course
      }
      onChange = {
        this.handleChangeCourse
      } > {
        uniqueCouse.map(course => ( <
          option key = {
            course.id
          }
          value = {
            course.tag
          } > {
            course.tag
          } <
          /option>
        ))
      } <
      /select> < /
      label > <
      div > {
        filterDropdown.map(course => ( <
          div key = {
            course.id
          }
          style = {
            {
              margin: "10px"
            }
          } > {
            course.course
          } {
            course.tag
          } <
          br / >
          <
          /div>
        ))
      } <
      /div> < /
      div >
    );
  }
}

export default App2

] Image-1-data not showing

Image-2

【问题讨论】：

标签： reactjs

【解决方案1】：

componentDidMount() 在初始渲染后运行。无法在初始渲染中显示您的数据。您必须等待数据。只有在第二次渲染时，您才能获取数据。在那之前，您可以从您的没有数据时渲染。

import React from 'react';
import ReactDOM from 'react-dom';




class App2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      courses: [],
      course: ""
    };

    this.handleChangeCourse = this.handleChangeCourse.bind(this);

  }


  handleChangeCourse(event) {
    this.setState({
      course: event.target.value
    });
  };


  getUnique(arr, comp) {
    const unique = arr
      .map(e => e[comp])
      .map((e, i, final) => final.indexOf(e) === i && i)
      .filter(e => arr[e])

      .map(e => arr[e]);

    return unique;
  }


  componentDidMount() {
    const courses = require("./courses.json");
    this.setState({
      courses: courses
    });
  }

  render() {
    if (this.state.courses.length === 0) return null;


    const uniqueCouse = this.getUnique(this.state.courses, "tag");

    const courses = this.state.courses;
    const course = this.state.course;

    const filterDropdown = courses.filter(function(result) {
      return result.tag === course;
    });

    return ( <
      div >
      <
      label >
      Select -
      <
      select value = {
        this.state.course
      }
      onChange = {
        this.handleChangeCourse
      } > {
        uniqueCouse.map(course => ( <
          option key = {
            course.id
          }
          value = {
            course.tag
          } > {
            course.tag
          } <
          /option>
        ))
      } <
      /select> < /
      label > <
      div > {
        filterDropdown.map(course => ( <
          div key = {
            course.id
          }
          style = {
            {
              margin: "10px"
            }
          } > {
            course.course
          } {
            course.tag
          } <
          br / >
          <
          /div>
        ))
      } <
      /div> < /
      div >
    );
  }
}

export default App2

【讨论】：

我很好奇。第二次渲染什么时候发生？
re-renders 每当您在组件中使用 setState 时就会发生。在你的情况下，那将是 componentDidMount

【解决方案2】：

你应该在构造函数中而不是在 componentDidMount 中设置初始状态：

constructor(props) {
    super(props);
    this.state = {
      courses: require("./courses.json"),
      course: ""
    };

    this.handleChangeCourse = this.handleChangeCourse.bind(this);

  }

要了解会发生什么，这里有一个很好的反应组件生命周期图：https://twitter.com/dan_abramov/status/981712092611989509/photo/1

【讨论】：