Question

我正在使用Reactjs，我正在使用的数据库是firestore，并且我正在使用moments.js

问题：

我的状态是“半”工作。当我从函数内部的state.availability调用它时，它将返回其初始状态，而不是我加载到其中的数据。但是，当我从渲染器调用state.availability时，它可以工作并显示加载的数据。

预期结果：

在使用函数时，state.availability应该返回我加载到其中的数据。

实际结果：

它返回初始数据。

我正在从数据库中获取包含员工可用性的数据。当页面使用“ useEffect”加载时被调用：

const LoadEmployeeData = async () => {
await props.firestore
  .collection("employeeData")
  .where("userID", "==", props.searchID)
  .get()
  .then(function (e) {
    setState({
      availability: [
        [
          e.docs[0].data().availability.availability.sun[0],
          e.docs[0].data().availability.availability.sun[1],
        ],
        [
          e.docs[0].data().availability.availability.mon[0],
          e.docs[0].data().availability.availability.mon[1],
        ],
        [
          e.docs[0].data().availability.availability.tue[0],
          e.docs[0].data().availability.availability.tue[1],
        ],
        [
          e.docs[0].data().availability.availability.wed[0],
          e.docs[0].data().availability.availability.wed[1],
        ],
        [
          e.docs[0].data().availability.availability.thu[0],
          e.docs[0].data().availability.availability.thu[1],
        ],
        [
          e.docs[0].data().availability.availability.fri[0],
          e.docs[0].data().availability.availability.fri[1],
        ],
        [
          e.docs[0].data().availability.availability.sat[0],
          e.docs[0].data().availability.availability.sat[1],
        ],
      ],
    });
  });
};

这是数据库的样子：

我正在使用编写的日历组件选择日期。当选择在日历上的日期，我运行一个函数用于获取一周中的一天，然后再返回一组代表天可用的div（注：此代码仍然是非常早期）：

// Gets the date Avaliable
const LoadDay = async (d) => {  
var tempdaySlot = [];

var day = moment().year(d.year).month(d.month).date(d.day).day();
setState({
  datePicked: moment().year(d.year).month(d.month).date(d.day).day(),
});

for (
  var i = state.availability[day][0];
  i < state.availability[day][1];
  i++
) {
  tempdaySlot.push(<div style={LocalStyles.daySlot}></div>);
}

setState({ daySlot: tempdaySlot });
};

d只是日历ex中的一个对象，例如：{day：1，month：6，year：1982}。我的问题是state.availability总是返回其初始值（[1,24]），而不是数据库中的值。最初，我认为我的数据没有被填充到状态中，但是我决定将数据呈现在页面上，并且有适当的值：

return (
<div>
  <Calender language={props.language} ReturnDay={(d) => LoadDay(d)} />
  {state.datePicked !== null ? (
    <div>
      {props.language.Calender.Days[state.datePicked]}
      <p />
      {state.availability[state.datePicked][0]} -{" "}
      {state.availability[state.datePicked][1]}
      <p />
      <Grid
        container
        direction="row"
        justify="flex-start"
        alignItems="center"
      >
        {state.daySlot}
      </Grid>
    </div>
  ) : null}
</div>
);

最后，我在整个代码中都放置了“ console.log”。在设置状态后，以及在GetDate函数中以及每次state.availability返回其初始值时，我都拥有它们。

Answer 1

我发现是导致问题的原因是我的日历组件。我决定让“ ReturnDay”设置日期选择状态，而不是直接调用函数。然后，当状态更改时，我可以在该函数之外运行该函数。

return (
<div>
  <Calender
    language={props.language}
    ReturnDay={(d) => setState({ datePicked: d })}
  />
  {state.datePicked !== null ? <RenderDay /> : null}
</div>
);

RenderDay基本上是我的LoadDay函数，带有添加的返回部分。这解决了我的问题。

const RenderDay = () => {
    var day = moment()
      .year(state.datePicked.year)
      .month(state.datePicked.month)
      .date(state.datePicked.day)
      .day();
    var tempdaySlot = [];
    for (
      var i = state.availability[day][0];
      i <= state.availability[day][1];
      i++
    ) {
      tempdaySlot.push(<div style={LocalStyles.daySlot}>{i}</div>);
    }

    return (
      <div>
        {state.datePicked.day} - {state.datePicked.month} -{" "}
        {state.datePicked.year}
        <p />
        {props.language.Calender.Days[day]} <p />
        <Grid
          container
          direction="row"
          justify="flex-start"
          alignItems="center"
        >
          {tempdaySlot}
        </Grid>
      </div>
    );
  };

我的反应状态在函数中不起作用，但在呈现时起作用

1 个答案: