Как исправить preact компонент не рендеринга на unistore действие с несколькими setState? - PullRequest
Новая
       17

Как исправить preact компонент не рендеринга на unistore действие с несколькими setState?

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

Я попытался изменить isLoading на true, прежде чем мы начнем извлекать данные, и снова изменить его на false, когда закончим.

Состояние и есть изменение, но, к сожалению, компонент не рендерится сначала setState. Компонент снова выполняет рендеринг setState

Я также попытался сделать setState({ isLoading: true }) в отдельном action и вызвать его внутри getJobs, но результат все тот же.

actions.js 

import Api from '../api';

const actions = store => ({
  async getJobs() {
    store.setState({ isLoading: true });
    // store is changed but component is not re-render

    const { data } = await Api.get(`/jobs`);

    store.setState({ jobs: data, isLoading: false });
    // store is changed and component do re-render
  }
});

export default actions;

jobs.js 

import { h, Component } from 'preact';
import { connect } from 'unistore/preact';

import actions from '../actions';
import Jobs from './Job';

class JobList extends Component {
  componentDidMount() {
    this.props.getJobs();
  }

  renderJobs() {
    return this.props.jobs.map(job => <Jobs key={job.id} {...job} />);
  }

  render() {
    if (this.props.isLoading) {
      return <p>loading...</p>;
    }

    return (
      <div style={{ flex: 1 }} className="container py-3">
        <div className="row">{this.renderJobs()}</div>
      </div>
    );
  }
}

export default connect(['isLoading', 'jobs'], actions)(JobList);

Я ожидаю, что когда мы изменим isLoading на true, сначала будет показан текст загрузки, но это не так.

версия для восстановления: 3.5. 0 preact версия: 10.0.1

...