ReactJS - выполнить код javascript после рендеринга данных функцией ajax - PullRequest
Новая
       7

ReactJS - выполнить код javascript после рендеринга данных функцией ajax

0 голосов
/ 04 сентября 2018

Где я должен разместить код JavaScript, чтобы я мог вызвать плагин после завершения рендеринга. 

<html>

<head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.2/es6-promise.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.13.1/axios.min.js'></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>


  <div id="root"></div>


  <script type="text/babel">

    const REST_API = 'users.json';

// The root component
const App = props => (
  <div className="app">
      <UserListContainer />
   </div>
);

// Container
class UserListContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      users: [{
        name: 'Loading data...'
      }]
    };
  }

  loadData() {
    axios.get(REST_API).then((response) => {
      //console.log(response.data);
      this.setState({
        users: response.data
      })
    });
  }

  // Life cycles hooks
  // facebook.github.io/react/docs/component-specs.html
  componentWillMount() {};
  componentDidMount() {
    // Data is loaded async, therefore will be inserted after first DOM rendering
    this.loadData();
  };
  componentWillReceiveProps(nextProps) {};
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  };
  componentWillUpdate(nextProps, nextState) {};
  componentDidUpdate(prevProps, prevState) {};
  componentWillUnmount() {};

  render() {
    return (<UserList users={this.state.users} />);
  };
}

// Presentation
const UserItem = (user, index) => (
  <li key={index}>
          <div className="header"> 
            <div className="name"> {user.name}</div>

            <div className="index">{(index+1)}</div>
          </div>

            <div className="date">
            <i className="fa fa-date" aria-hidden="true"></i>
            <span>{user.date}</span>
          </div>



          <div className="contact">
            <i className="fa fa-phone" aria-hidden="true"></i>
            <span>{user.phone}</span>
          </div>
      </li>
);
const UserList = props => (
  <div className="user-list">
    <h1>React ES6 Ajax, Container and Presentation - example</h1>
    <ul>
        {props.users.map(UserItem)}
     </ul>
   </div>
);

// Render
ReactDOM.render(
  <App />, document.getElementById('root')
);

    </script>



</body>

</html>

Я добавил его к 

  componentDidUpdate(prevProps, prevState) {
    alert();
  };

Затем, после первого элемента, работает функция оповещения,

Это мои настоящие файлы - https://drive.google.com/drive/folders/1G7UOaCFS_521hfZc4-jNeLGiKR4XaQjP?usp=sharing

enter image description here

enter image description here

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

componentDidMount - правильное место для получения данных, и вы делаете это правильно. componentDidUpdate Хук используется, если вам нужно получить реквизит или состояние и обновить соответственно. Это необходимо, если ваш дочерний компонент будет обновлять их из родительского компонента, получая данные. Но после изучения вашего кода я не заметил, что вам требуется родительский компонент. Итак, вам не нужен componentDidUpdate крючок. Вам просто нужно сделать следующее:

Поддерживать состояние как: 

this.state = {
  users: [],
  loading: true,
  loadingText: 'Loading data...'
};

Затем, после загрузки загрузки набора данных в значение false: 

loadData() {
    axios.get(REST_API).then((response) => {
      //console.log(response.data);
      this.setState({
        users: response.data,
        loading: false
      })
    });
  }

Теперь, когда вы их визуализируете: 

const UserList = props => (
  <div className="user-list">
    <h1>React ES6 Ajax, Container and Presentation - example</h1>
    <ul>
        {!props.loading && props.users && props.users.map(UserItem)}
     </ul>
   </div>
);

Примечание: Вы также должны пройти состояние загрузки.

0 голосов
/ 04 сентября 2018

Если я правильно понимаю ваши требования, то хук componentDidUpdate() будет правильным для доступа к DOM (и вызова вашего плагина). Это будет вызвано после рендеринга вашего компонента.

Как указать в официальных документах для componentDidUpdate():

Используйте это как возможность работать на DOM, когда компонент был обновлен. Это также хорошее место для выполнения сетевых запросов, если вы сравниваете текущий реквизит с предыдущими реквизитами (например, сетевой запрос может не понадобиться, если реквизиты не изменились).

Ключевым моментом, который стоит отметить, является то, что хук componentDidUpdate() не срабатывает при первом рендере.

Обновление

Чтобы решить эту проблему «первого рендеринга», вы можете использовать дополнительный обратный вызов, который может быть передан в setState(state, callback). Это callback запускается после визуализации вашего компонента (после изменения состояния).

В вашем случае вы можете сделать что-то вроде этого: 

loadData() {
    axios.get(REST_API).then((response) => {
      //console.log(response.data);
      this.setState({ users: response.data }, () => {

           // When this callback is invoked, the component has been 
           // rendered and the DOM can be safely accessed
      })
    });
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...