remesh-js/remesh

组件内部Query和Update一个状态，每次重新打开组件的时候，Query对应的State又被初始化为默认值了

Closed this issue · 4 comments

miser commented

每次打开 TypeGridFilterCmp 组件，值都是 空 '', 请问为什么呀？

import { Remesh } from 'remesh';

export type DataType = '' | 'MTD';

const HeaderFilterDomain = Remesh.domain({
  name: 'HeaderFilterDomain',
  impl: (domain) => {
    const DataTypeState = domain.state<DataType>({
      name: 'DataTypeState',
      default: '',
    });

    const DataTypeQuery = domain.query({
      name: 'DataTypeQuery',
      impl: ({ get }) => {
        return get(DataTypeState());
      },
    });

    const UpdateDataTypeCommand = domain.command({
      name: 'UpdateDataTypeCommand',
      impl: (_, type: DataType) => {
        return DataTypeState().new(type);
      },
    });

    return {
      query: { DataTypeQuery },
      command: { UpdateDataTypeCommand },
      event: {},
    };
  },
});

export default HeaderFilterDomain;
function TypeGridFilterCmp(props: IProps) {
  const { onClick } = props;

  const send = useRemeshSend();
  const headerFilterDomain = useRemeshDomain(HeaderFilter());
  const dataType = useRemeshQuery(headerFilterDomain.query.DataTypeQuery());
  console.log('log: dataType', dataType);
  const updateDataType = (type: DataType) => {
    send(headerFilterDomain.command.UpdateDataTypeCommand(type));
  };

  return (
    <div>
      <Grid columns={1} className="pick-type-grid">
        <Grid.Item>
          <ul>
            <li
              className={dataType === '' ? 'active' : ''}
              onClick={() => {
                updateDataType('');
              }}
            >
              1
              <div className="wait-select-icon" />
            </li>
            <li
              className={dataType === '2' ? 'active' : ''}
              onClick={() => {
                updateDataType('MTD');
              }}
            >
  2
              <div className="wait-select-icon" />
            </li>
          </ul>
        </Grid.Item>
      </Grid>
    </div>
  );
}
hourong88 commented
github-actions commented

Thank feedback. We will check it later:-)

Lucifier129 commented

@miser 这是由于只有这个组件订阅了那个 Query，因此一旦它卸载，就会被回收掉。

可以通过 RemeshScope组件来主动管理Query的保活范围，见文档

  • 👍1
hourong88 commented