时间戳

首页 > 解决方案 > Reactjs Array.prototype.map 返回未定义

javascript - Reactjs Array.prototype.map 返回未定义

问题描述

我有这个组件：

  const WeekDays = ({dateInformation, daysInMonth}) => {
  const [weekday, setWeekDays] = useState([
    {name: 'Su', days: []},
    {name: 'Mo', days: []},
    {name: 'Tu', days: []},
    {name: 'We', days: []},
    {name: 'Th', days: []},
    {name: 'Fr', days: []},
    {name: 'Sa', days: []},
  ]);

  const organizeDays = () => {
    const calcDays = daysInMonth(dateInformation.month, dateInformation.year);
    const reversedWeekdays = [...weekday].reverse();

    const finalResult = reversedWeekdays.map((el, index) => {
      calcDays.map((day) => {
        return day.weekDay === index && {...el, days: [...el.days, day]};
      });
    });

    setWeekDays(finalResult.reverse());
  };

  useEffect(() => {
    organizeDays();
  }, [dateInformation.month, dateInformation.year]);

  return (
    <View style={{flexDirection: 'row', marginTop: '3%'}}>
      {weekday.map((day) => {
        return (
          <View>
            <Text style={styles.weekDayText} key={day.name}>
              {day.name}
            </Text>
            <TouchableOpacity>
              {/* {day.days.map((el) => (
                <Text key={el}>wewe</Text>
              ))} */}
            </TouchableOpacity>
          </View>
        );
      })}
    </View>
  );
};

daysInMonth计算月份中的工作日，例如它返回如下数组：

[{"dayNum": 1, "weekDay": 6}, {"dayNum": 2, "weekDay": 0}, {"dayNum": 3, "weekDay": 1}, {"dayNum": 4, "weekDay": 2}, {"dayNum": 5, "weekDay": 3}, {"dayNum": 6, "weekDay": 4}, {"dayNum": 7, "weekDay": 5}, {"dayNum": 8, "weekDay": 6}, {"dayNum": 9, "weekDay": 0}, {"dayNum": 10, "weekDay": 1}, {"dayNum": 11, "weekDay": 2}, {"dayNum": 12, "weekDay": 3}, {"dayNum": 13, "weekDay": 4}, {"dayNum": 14, "weekDay": 5}, {"dayNum": 15, "weekDay": 6}, {"dayNum": 16, "weekDay": 0}, {"dayNum": 17, "weekDay": 1}, {"dayNum": 18, "weekDay": 2}, {"dayNum": 19, "weekDay": 3}, {"dayNum": 20, "weekDay": 4}, {"dayNum": 21, "weekDay": 5}, {"dayNum": 22, "weekDay": 6}, {"dayNum": 23, "weekDay": 0}, {"dayNum": 24, "weekDay": 1}, {"dayNum": 25, "weekDay": 2}, {"dayNum": 26, "weekDay": 3}, {"dayNum": 27, "weekDay": 4}, {"dayNum": 28, "weekDay": 5}, {"dayNum": 29, "weekDay": 6}, {"dayNum": 30, "weekDay": 0}, {"dayNum": 31, "weekDay": 1}]

我想要达到的目标：

我想对daysInMonth工作日对象内部返回的信息进行排序days:[]，但不幸的是，我的organizeDays输出返回的是充满未定义值的数组

[undefined,undefined,undefined,.....]

请问有什么建议可以解决这个问题吗？

标签： javascriptreactjs

解决方案

问题出在这些代码行中，您没有从reversedWeekdays.map函数调用返回结果。

因此，您需要执行以下操作才能获得结果，而不是undefined.

const finalResult = reversedWeekdays.map((el, index) => {
  return calcDays.map((day) => {
    return day.weekDay === index && {...el, days: [...el.days, day]};
  });
});

推荐阅读