时间戳

首页 > 解决方案 > 道具未被识别

reactjs - 道具未被识别

问题描述

下面是我从后端获得的声明变量。

function DateTimeFilterComponent(props) {
  const { chartPeriod } = props;
  const classes = useStyles();
  let timeStampData = {};
  let dateFrom = '';
  let dateTo = '';

  if (!isEmpty(chartPeriod) && chartPeriod) {
    timeStampData = Object.values(chartPeriod).map(payload => payload);
    const [dateOne, dateTwo] = timeStampData[1].timeStamps;
    dateFrom = dateOne;
    dateTo = dateTwo;
  }

  return (
    <form className={classes.container} noValidate>
      <Grid container alignments="flex-end">
        <Grid item>
          <DateTimeComponent controlName="dateFrom" defaultValue={dateFrom} />
        </Grid>
        <Grid item>
          <DateTimeComponent controlName="dateTo" defaultValue={dateTo} />
        </Grid>
      </Grid>
    </form>
  );
}

dateFrom 和 dateTo 返回类型是字符串，即“2021-07-12T00:00”，我分配给我的组件，如下所示：

<DateTimeComponent controlName="dateFrom" defaultValue={dateFrom} />
<DateTimeComponent controlName="dateTo" defaultValue={dateTo} />

但是，在我的 TextField 组件中，当我在我的 useState 上分配 dateFrom 和 dateTo 时，它没有被识别。

function DateTimeComponent(props) {
  const { controlName, defaultValue } = props;
  const classes = useStyles();
  const [getDate, setDate] = React.useState(defaultValue);

  const handleChangeDate = e => {
    setDate(e.target.value);
  };

  return (
    <TextField
      id={controlName}
      type="datetime-local"
      value={getDate}
      className={classes.textField}
      size="small"
      onChange={handleChangeDate}
      InputLabelProps={{
        shrink: true,
      }}
      inputProps={{ className: classes.inputSize }}
    />
  );
}

但是当我这样声明值时，useState 识别出字符串值并在文本字段中正确设置。

    <DateTimeComponent controlName="dateFrom" defaultValue="2021-07-12T00:00" />
    <DateTimeComponent controlName="dateTo" defaultValue="2021-07-12T00:00" />

任何人都可以指出什么是错误的并做出奇怪的行为。

谢谢

标签： reactjs

解决方案

好的，这意味着第一次渲染您的组件时，例如一个实例defaultValue是空的（直到您从后端获得实际值）。

所以为了解决这个问题，你需要添加这个

{dateFrom && <DateTimeComponent controlName="dateFrom" defaultValue={dateFrom} />}

{dateTo && <DateTimeComponent controlName="dateTo" defaultValue={dateTo} />}

或者像这样添加useEffect你的DateTimeComponent组件

  useEffect(() => {
    setDate(defaultValue)
  }, [ defaultValue ])

推荐阅读