Блог

В моем приложении react я показал опцию выбора. Используя следующее руководство, изучил функцию фильтрации как выпадающую функцию фильтрации как выпадающую

Проблема — при загрузке страницы в первый раз данные не отображаются в соответствии с выбранной опцией. Есть ли какой-либо способ, которым я могу отобразить данные при загрузке страницы в первый раз.

Здесь я прикрепил изображения и код ниже — [

 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 amp;amp; 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  

]
Изображение-1-данные не отображаются

Изображение-2

componentDidMount() запускается после первоначального рендеринга. Нет никакого способа показать ваши данные при первоначальном рендеринге. Вы должны дождаться получения данных. Только при втором рендеринге вы получите данные. До тех пор вы могли бы вернуться null из своего рендеринга, когда у вас нет данных.

 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 amp;amp; 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
  

Вы должны установить начальное состояние в конструкторе, а не в componentDidMount:

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

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

  }
  

Чтобы понять, что происходит, вот хорошая диаграмма жизненного цикла компонента react:https://twitter.com/dan_abramov/status/981712092611989509/photo/1