Javascript saga在组件渲染后获取数据_Javascript_Reactjs_Redux_React Redux

Javascript saga在组件渲染后获取数据

javascript reactjs redux

Javascript saga在组件渲染后获取数据,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,您好，很抱歉我的英语不好。我正在使用react和redux。我在布局组件中分派getTags操作。问题是在调用getData操作之后，在呈现组件之后调用getDataSuccess操作。因此，我的数据为空。如何确保获取数据并呈现组件布局： function DashboardLayout({ children, showSideBar, backgroundColor, getTagsFromServer, getCategoriesFromServer, }) {

您好，很抱歉我的英语不好。我正在使用react和redux。我在布局组件中分派getTags操作。问题是在调用getData操作之后，在呈现组件之后调用getDataSuccess操作。因此，我的数据为空。如何确保获取数据并呈现组件

布局：

function DashboardLayout({
  children,
  showSideBar,
  backgroundColor,
  getTagsFromServer,
  getCategoriesFromServer,
}) {
  getTagsFromServer();
  getCategoriesFromServer();
  
  return (
    <StyledDashbordLayout>
      <NavBar />
      <SideBarDrawer />
      <Grid container className="container">
        {showSideBar && (
          <Grid item className="sidebar-section">
            <SideBar />
          </Grid>
        )}
        <Grid item className="content">
          {children}
        </Grid>
      </Grid>
    </StyledDashbordLayout>
  );
}

DashboardLayout.propTypes = {
  children: PropTypes.node.isRequired,
  showSideBar: PropTypes.bool.isRequired,
  backgroundColor: PropTypes.string,
  getTagsFromServer: PropTypes.func,
  getCategoriesFromServer: PropTypes.func,
};

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    getTagsFromServer: () => dispatch(getTags()),
    getCategoriesFromServer: () => dispatch(getCategories()),
  };
}

const withConnect = connect(
  null,
  mapDispatchToProps,
);

export default compose(withConnect)(DashboardLayout);

这是我的选择框组件，它从存储中获取空数据：

import React, { useState } from 'react';
function UploadFileInfo({ tags, categories }) {
  return (
    <Paper square className={classes.paper}>
      <Tabs
        onChange={handleChange}
        aria-label="disabled tabs example"
        classes={{ indicator: classes.indicator, root: classes.root }}
        value={tab}
      >
        <Tab
          label="مشخصات ویدیو"
          classes={{
            selected: classes.selected,
          }}
        />
        <Tab
          label="تنظیمات پیشرفته"
          classes={{
            selected: classes.selected,
          }}
        />
      </Tabs>
      {tab === 0 && (
        <Grid container className={classes.info}>
          <Grid item xs={12} sm={6} className={classes.formControl}>
            <label htmlFor="title" className={classes.label}>
              عنوان ویدیو
            </label>
            <input
              id="title"
              type="text"
              className={classes.input}
              onChange={e => setValue('title', e.target.value)}
              defaultValue={data.title}
            />
          </Grid>
          <Grid item xs={12} sm={6} className={classes.formControl}>
            <SelectBox
              onChange={e => setValue('category', e.target.value)}
              value={data.category}
              label="دسته بندی"
              options={converItems(categories)}
            />
          </Grid>
          <Grid item xs={12} className={classes.textAreaWrapper}>
            <label htmlFor="info" className={classes.label}>
              توضیحات
            </label>
            <TextField
              id="info"
              multiline
              rows={4}
              defaultValue={data.info}
              variant="outlined"
              classes={{ root: classes.textArea }}
              onChange={e => setValue('info', e.target.value)}
            />
          </Grid>
          <Grid item xs={12} sm={6} className={classes.formControl}>
            <SelectBox
              onChange={e => {
                if (e.target.value.length > 5) {
                  console.log('hi');
                  setError(
                    'tags',
                    'تعداد تگ ها نمی تواند بیشتر از پنج عدد باشد',
                  );
                  return;
                }
                setValue('tags', e.target.value);
              }}
              value={data.tags}
              label="تگ ها"
              options={converItems(tags)}
              multiple
              onDelete={id => deleteTagHandler(id)}
              error={errors.tags}
            />
          </Grid>
        </Grid>
      )}
      {tab === 1 && 'دومی'}
      <Dump data={data} />
    </Paper>
  );
}

const mapStateToProps = createStructuredSelector({
  tags: makeSelectTags(),
  categories: makeSelectCategories(),
});


const withConnect = connect(
  mapStateToProps,
  null,
);

export default compose(withConnect)(UploadFileInfo);

import React，{useState}来自“React”；
函数UploadFileInfo（{tags，categories}）{
返回(
{tab===0&&(
عنوان ویدیو
setValue（'title'，e.target.value）}
defaultValue={data.title}
/>
setValue（'category'，e.target.value）}
值={data.category}
label=“دستهبدی”
选项={converItems（类别）}
/>
توضیحات
setValue（'info'，e.target.value）}
/>
{
如果（如目标值长度>5）{
console.log（'hi'）；
设置错误(
“标签”，
'تعداد تگ ها نمی تواند بیشتر از پنج عدد باشد',
);
返回；
}
设置值（“标记”，即目标值）；
}}
值={data.tags}
label=“تگها”
选项={converItems（标记）}
倍数
onDelete={id=>deleteTagHandler（id）}
error={errors.tags}
/>
)}
{tab==1&&'
);
}
const mapStateToProps=createStructuredSelector({
标记：makeSelectTags（），
类别：makeSelectCategories（），
});
const withConnect=connect(
MapStateTops，
无效的
);
导出默认组合（withConnect）（上传文件信息）；

使用函数调用React.useffect中的API

所有API调用都应该在

useffect

hook中。有关useEffect的更多信息，请阅读

功能仪表板布局({
儿童
显示侧边栏，
背景色，
getTagsFromServer，
getCategoriesFromServer，
}) {
React.useffect（（）=>{
getTagsFromServer（）；
getCategoriesFromServer（）；
}, []);
返回(
{showSideBar&&(
)}
{儿童}
);
}

使用函数调用React.useffect中的API

所有API调用都应该在

useffect

hook中。有关useEffect的更多信息，请阅读

功能仪表板布局({
儿童
显示侧边栏，
背景色，
getTagsFromServer，
getCategoriesFromServer，
}) {
React.useffect（（）=>{
getTagsFromServer（）；
getCategoriesFromServer（）；
}, []);
返回(
{showSideBar&&(
)}
{儿童}
);
}

问题摘要如果我没有弄错您的问题，您是在问如何防止在数据尚未提取时，在

UploadFileInfo

的

SelectBox

中的

options={converItems（tags）}

选项的传递

解决有几个选项可以防止

null

或

未定义的值
最简单的方法是为标记提供默认回退值。这里我假设标签是一个数组，但是它们可以是任何东西，所以请根据您的需要进行调整
传递时内联options={converItems（标记| |[]）
或options={converItems（标记？？[]）
在函数签名函数UploadFileInfo（{tags=[]，categories}）中
作为makeSelectTags
另一种常见模式是条件呈现，其中null
可能是初始redux状态值，因此您只需等待不为null即可呈现UI
如果没有标记，则提前返回null
function UploadFileInfo({ tags, categories }) {
  if (!tags) return null;

  return (
    <Paper square className={classes.paper}>
      ...


关于在仪表板布局中获取数据调用的旁注
当您将函数调用直接放在函数体中时，将在react决定“呈现”时被调用执行任何DOM差异化等操作的组件，几乎在DashboardLayout
渲染数据时都会执行，这可能会产生意外影响。因此，react功能组件体应该是纯函数，没有副作用。将任何数据提取调用放在名为onl的效果挂钩中y一次当组件装载时（或者如果需要在其他特定条件下调用它，则为适当的依赖项）
问题摘要
如果我没有弄错您的问题，您是在问如何防止在数据尚未提取时，在UploadFileInfo
的SelectBox
中的options={converItems（tags）}
选项的传递
解决
有几个选项可以防止null
或未定义的值
最简单的方法是为标签
提供默认的回退值。这里我假设标签
是一个数组，但它们可以是任何东西，因此请根据需要进行调整
传递时内联options={converItems（标记| |[]）
或options={converItems（标记？？[]）
在函数签名函数UploadFileInfo（{tags=[]，categories}）中
作为回退返回的一部分v
function DashboardLayout({
  children,
  showSideBar,
  backgroundColor,
  getTagsFromServer,
  getCategoriesFromServer,
}) {

  React.useEffect(() => {
     getTagsFromServer();
     getCategoriesFromServer();
  }, []);

  
  return (
    <StyledDashbordLayout>
      <NavBar />
      <SideBarDrawer />
      <Grid container className="container">
        {showSideBar && (
          <Grid item className="sidebar-section">
            <SideBar />
          </Grid>
        )}
        <Grid item className="content">
          {children}
        </Grid>
      </Grid>
    </StyledDashbordLayout>
  );
}


function UploadFileInfo({ tags, categories }) {
  if (!tags) return null;

  return (
    <Paper square className={classes.paper}>
      ...

{tags ? (
    <SelectBox
      ...
    />
  ) : null
}

useEffect(() => {
  getTagsFromServer();
  getCategoriesFromServer();
}, []);