反应本机映射不返回 JSX 元素

Question

我正在从事一个个人项目以进一步了解我的知识，并且我正在尝试创建一个周历视图我得到了日期并且一切正常，但是当我使用 .map() 时我无法显示列表中的值.我已经做了无数的谷歌搜索，几乎没有运气。但是，列表中的值会打印到控制台，因此在 .map() 函数中返回元素时我一定做错了。任何帮助将不胜感激

import React, {useEffect} from 'react';
import {View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';
import styles from '../Styling/DailyStyling';
import Back from '../Img/left_arrow.png';
import User from '../Img/profile.png';

let week = [{ID: '', date: '', WeekDay: ''}];

function makeid(length) {
  var result = '';
  var characters =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  var charactersLength = characters.length;

  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

const Daily = ({navigation}) => {
  useEffect(() => {
    Create_Calender();
  }, []);

  const Create_Calender = () => {
    let curr = new Date();
    var days = [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ];

    for (let i = 1; i <= 7; i++) {
      let first = curr.getDate() - curr.getDay() + i;
      var dayName = days[curr.getDay()];
      let day = new Date(curr.setDate(first)).toISOString().slice(0, 10);
      let weekDay = dayName.slice(0, 3);
      let newDate = new Date(day);
      let dayNum = newDate.getDate();
      week.push({ID: makeid(5), date: dayNum, WeekDay: weekDay});
    }
    return week;
  };

  return (
    <View style={styles.parent}>
      <View style={styles.root}>
        <TouchableOpacity
          title="Back"
          style={styles.btnBack}
          onPress={() => navigation.goBack('Dashboard')}>
          <Image source={Back} style={styles.backIcon} />
        </TouchableOpacity>
        <Text style={styles.txtTitle}>Daily</Text>
        <TouchableOpacity style={styles.btnProfile}>
          <Image source={User} style={styles.profileIcon} />
        </TouchableOpacity>
      </View>

      <View style={styles.calender}>
        <ScrollView horizontal={true}>
          <View style={styles.days}>
            {week.map(item => {
              return (
                <View key="{item.ID}">
                  <Text>{item.date}</Text>
                  <Text>{item.WeekDay}</Text>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    </View>
  );
};

export default Daily;

Answer 1

你没有得到结果，因为在生成周数组时组件没有更新，使用 React 中的 useState Hook 重新渲染组件

代码：

const Create_Calender = () => {
  const wk = [{ ID: '', date: '', WeekDay: '' }];
  let curr = new Date();
  var days = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ];

  for (let i = 1; i <= 7; i++) {
    let first = curr.getDate() - curr.getDay() + i;
    var dayName = days[curr.getDay()];
    let day = new Date(curr.setDate(first)).toISOString().slice(0, 10);
    let weekDay = dayName.slice(0, 3);
    let newDate = new Date(day);
    let dayNum = newDate.getDate();
    wk.push({ ID: makeid(5), date: dayNum, WeekDay: weekDay });
  }
  return wk;
};

function makeid(length) {
  var result = '';
  var characters =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  var charactersLength = characters.length;

  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

const Daily = ({ navigation }) => {
  const [week, setWeek] = useState([]);

  useEffect(() => {
    //generate week array and set in state ones
    const newWeeks = Create_Calender();
    setWeek(newWeeks);
  }, []);

return (//Views)
}