React Native中如何将JS输出添加至初始状态？日期初始化问题求助

嘿，我来帮你搞定这两个React Native状态初始化的问题！

不管你用的是类组件还是函数组件，都可以直接在状态初始化时执行JavaScript表达式来生成初始值——本质上就是把JS代码的计算结果赋值给状态属性就行，完全不需要额外的特殊语法。

简单来说：

• 类组件里，在constructor中直接计算后赋值给this.state的属性
• 函数组件里，把JS表达式直接传给useState钩子

你写的代码有三个小问题，导致无法正常运行：

1. 类组件的constructor必须调用super(props)，否则会报错
2. 你给date的值套了多余的大括号{}，这会把它变成一个对象而非字符串，这肯定不是你想要的
3. JavaScript的getMonth()返回的是0-11的数字（0对应1月），直接用的话月份会少1，得加个1修正

正确的类组件写法： #

constructor(props) {
  super(props); // 类组件的constructor必须调用super！
  const today = new Date();
  // 格式化日期，同时修正月份偏差
  const formattedDate = `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()}`;
  this.state = {
    date: formattedDate // 直接赋值字符串，去掉多余的大括号
  };
}

如果是函数组件（现在React Native更推荐的写法）： #

import React, { useState } from 'react';
import { View, Text } from 'react-native';

const YourComponent = () => {
  // 在useState里直接计算初始日期
  const [date, setDate] = useState(() => {
    const today = new Date();
    return `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()}`;
  });

  return (
    <View>
      <Text>{date}</Text>
    </View>
  );
};

export default YourComponent;

这样就能正确初始化日期状态啦！

内容的提问来源于stack exchange，提问作者Shibin Raju Mathew