Question

我尝试在开始获取数据之前将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时，它们将首先显示正在加载文本，但不会显示。

unistore版本：3.5.0 预先版本：10.0.1

如何修复preact组件在具有多个setState的unistore操作上不重新呈现？

0 个答案: