Reactjs Usestate在文本标签中不起作用，并为我提供相同的值_Reactjs_React Native_Calendar_Momentjs_Use State

Reactjs Usestate在文本标签中不起作用，并为我提供相同的值

reactjs react-native calendar

Reactjs Usestate在文本标签中不起作用，并为我提供相同的值,reactjs,react-native,calendar,momentjs,use-state,Reactjs,React Native,Calendar,Momentjs,Use State,我已经做了一个星期日历，显示从星期天到星期六。问题在于，文本值即使在console.log中更改，也不会更改。我尝试过使用state和setState，但没有成功！你知道有什么问题吗 const TextScreen =()=> { let [Sunday_formatted, nextSunday] =useState() let [Saturday_formatted, nextSaturday]=useState() const getWe

我已经做了一个星期日历，显示从星期天到星期六。问题在于，文本值即使在console.log中更改，也不会更改。我尝试过使用state和setState，但没有成功！你知道有什么问题吗

const TextScreen =()=> {
     let [Sunday_formatted, nextSunday] =useState()
     let [Saturday_formatted, nextSaturday]=useState()
    
       const getWeek = (date = new Date()) => {
        const dayIndex = date.getDay();
        const diffToLastSunday = (dayIndex !== 0) ? dayIndex -0 : 6;
        const dateOfSunday = new Date(date.setDate(date.getDate() - diffToLastSunday));
        const dateOfSaturday = new Date(date.setDate(dateOfSunday.getDate() + 6));
        
        return [dateOfSunday, dateOfSaturday];
      }
      
       let [Sunday, Saturday] = getWeek();
       console.log(Sunday,Saturday)
        
          console.log("First/Last of week as Date Objects: ", Sunday, Saturday);
         Sunday_formatted = moment(Sunday).format("DD");
           Saturday_formatted = moment(Saturday).format("DD.MMMM");
          console.log(Sunday_formatted, "-", Saturday_formatted);
        
        function changeData(){
              Sunday=moment(Sunday).add(7, 'days')
              Saturday=moment(Saturday).add(7,'days')
             nextSunday( moment(Sunday).format("DD"))
               nextSaturday(moment(Saturday).format("DD.MMMM"))
               console.log(nextSunday, '-', nextSaturday)
               console.log('this is the new Sunday', Sunday_formatted)
        }
           
           
        return(
           
       <View backgroundColor='#16DCD3'>     
           
        <View style={{flexDirection:'row', alignContent:'center', padding:20, alignItems:'center'}}>
          <Ionicons name="ios-arrow-back" size={30} color="grey" />
          <Text  style={styles.content} >{Sunday_formatted}-{Saturday_formatted}</Text>
          <Ionicons name="ios-arrow-forward" size={30} color="grey" onPress={()=>changeData()} />        
        </View>
        
       </View>
        
        )
  
}

const TextScreen=（）=>{
让[Sunday\u，nextSunday]=useState（）
让[Saturday\u格式化，nextSaturday]=useState（）
const getWeek=（日期=新日期（））=>{
const dayIndex=date.getDay（）；
const difftolastsday=（dayIndex！==0）？dayIndex-0:6；
const dateOfSunday=新日期（Date.setDate（Date.getDate（）-difftolastsday））；
const dateOfSaturday=新日期（Date.setDate（dateOfSunday.getDate（）+6））；
返回[星期日，星期日]；
}
让[星期日，星期六]=getWeek（）；
console.log（星期日、星期六）
log（“作为日期对象的第一周/最后一周：”，星期日，星期六）；
星期日格式=时刻（星期日）。格式（“DD”）；
星期六格式=时刻（星期六）。格式（“DD.MMMM”）；
日志（星期日格式，“-”，星期六格式）；
函数changeData（）{
星期日=时刻（星期日）。添加（7，‘天’）
星期六=时刻（星期六）。加上（7，'days'）
下星期二（星期日）。格式（“DD”））
下周六（星期六）。格式（“DD.MMMM”））
console.log（下周日，'-'，下周六）
log（'这是新的星期日'，星期日格式）
}
返回(
{星期日格式}-{星期六格式}
changeData（）}/>
)
}

一个问题是，你在星期日和星期日都持有星期日的状态，这可能会导致问题

const TextScreen = () => {
  const getSunday = (date) => {
    const dayIndex = date.getDay();
    const diffToLastSunday = (dayIndex !== 0) ? dayIndex : 6;
    return new Date(date.setDate(date.getDate() - diffToLastSunday));
  }

  const getSaturday = (sunday) => {
    return moment(sunday).add(6, 'days').toDate();
  }

  const [Sunday, setSunday] = useState(getSunday(new Date()));
  const [Saturday, setSaturday] = useState(getSaturday(Sunday));

  function changeData() {
    setSunday(moment(Sunday).add(7, 'days').toDate());
    setSaturday(moment(Saturday).add(7, 'days').toDate());
  }

  return (
    <View backgroundColor='#16DCD3'>
      <View style={{ flexDirection: 'row', alignContent: 'center', padding: 20, alignItems: 'center' }}>
        <Ionicons name="ios-arrow-back" size={30} color="grey" />
        <Text>{moment(Sunday).format("DD")}-{moment(Saturday).format("DD.MMMM")}</Text>
        <Ionicons name="ios-arrow-forward" size={30} color="grey" onClick={() => changeData()} />
      </View>
    </View>
  )

}

const TextScreen=（）=>{
const getSunday=（日期）=>{
const dayIndex=date.getDay（）；
const diffToLastSunday=（dayIndex！==0）？dayIndex:6；
返回新日期（Date.setDate（Date.getDate（）-diffToLastSunday））；
}
const getSaturday=（星期日）=>{
返回时间（星期日）。添加（6，'天'）.toDate（）；
}
const[Sunday，setSunday]=useState（getSunday（new Date（））；
const[Saturday，setSaturday]=useState（getSaturday（Sunday））；
函数changeData（）{
设置星期日（星期日）。添加（7，'天'）.toDate（）；
设置周六（星期六）。添加（7，‘天’）.toDate（）；
}
返回(
{时刻（星期日）.format（“DD”）}-{时刻（星期六）.format（“DD.MMMM”）}
changeData（）}/>
)
}

这样，星期天的州就只有一个地方了。如果您想在多个地方使用星期日和星期六的特定格式，只需将格式提取到一个方法中，并在需要时重用它。

一个问题是，您在星期日和星期日格式中都保留了星期日的状态，这可能会导致问题

const TextScreen = () => {
  const getSunday = (date) => {
    const dayIndex = date.getDay();
    const diffToLastSunday = (dayIndex !== 0) ? dayIndex : 6;
    return new Date(date.setDate(date.getDate() - diffToLastSunday));
  }

  const getSaturday = (sunday) => {
    return moment(sunday).add(6, 'days').toDate();
  }

  const [Sunday, setSunday] = useState(getSunday(new Date()));
  const [Saturday, setSaturday] = useState(getSaturday(Sunday));

  function changeData() {
    setSunday(moment(Sunday).add(7, 'days').toDate());
    setSaturday(moment(Saturday).add(7, 'days').toDate());
  }

  return (
    <View backgroundColor='#16DCD3'>
      <View style={{ flexDirection: 'row', alignContent: 'center', padding: 20, alignItems: 'center' }}>
        <Ionicons name="ios-arrow-back" size={30} color="grey" />
        <Text>{moment(Sunday).format("DD")}-{moment(Saturday).format("DD.MMMM")}</Text>
        <Ionicons name="ios-arrow-forward" size={30} color="grey" onClick={() => changeData()} />
      </View>
    </View>
  )

}

const TextScreen=（）=>{
const getSunday=（日期）=>{
const dayIndex=date.getDay（）；
const diffToLastSunday=（dayIndex！==0）？dayIndex:6；
返回新日期（Date.setDate（Date.getDate（）-diffToLastSunday））；
}
const getSaturday=（星期日）=>{
返回时间（星期日）。添加（6，'天'）.toDate（）；
}
const[Sunday，setSunday]=useState（getSunday（new Date（））；
const[Saturday，setSaturday]=useState（getSaturday（Sunday））；
函数changeData（）{
设置星期日（星期日）。添加（7，'天'）.toDate（）；
设置周六（星期六）。添加（7，‘天’）.toDate（）；
}
返回(
{时刻（星期日）.format（“DD”）}-{时刻（星期六）.format（“DD.MMMM”）}
changeData（）}/>
)
}

这样，星期天的州就只有一个地方了。如果您想在多个地方使用星期日和星期六的特定格式，只需将格式提取到一个方法中，并在需要时重用它。

您可以使用

const

for

useState

，因为它在代码中保持不变。这样做真的是个坏主意

Sunday_formatted = moment(Sunday).format("DD");

我设法运行了下一个代码

const TextScreen = () => {
   const [Sunday_formatted, nextSunday] = useState();
   const [Saturday_formatted, nextSaturday] = useState();
    
   const getWeek = (date = new Date()) => {
        const dayIndex = date.getDay();
        const diffToLastSunday = (dayIndex !== 0) ? dayIndex - 0 : 6;
        const dateOfSunday = new Date(date.setDate(date.getDate() - diffToLastSunday));
        const dateOfSaturday = new Date(date.setDate(dateOfSunday.getDate() + 6));
        
        return [dateOfSunday, dateOfSaturday];
    }
      
    let [Sunday, Saturday] = getWeek();
    console.log(Sunday,Saturday)
        
    function changeData(){
        Sunday=moment(Sunday).add(7, 'days')
        Saturday=moment(Saturday).add(7,'days')
        nextSunday( moment(Sunday).format("DD"))
        nextSaturday(moment(Saturday).format("DD.MMMM"))
        console.log(nextSunday, '-', nextSaturday)
        console.log('this is the new Sunday', Sunday_formatted)
    }
           
           
    return(
        <View backgroundColor='#16DCD3'>     
            <View style={{flexDirection:'row', alignContent:'center', padding:20, alignItems:'center'}}>
                <Ionicons name="ios-arrow-back" size={30} color="grey" />
                <Text  style={styles.content} >{Sunday_formatted}-{Saturday_formatted}</Text>
                <Ionicons name="ios-arrow-forward" size={30} color="grey" onPress={()=>changeData()} />        
            </View>
        </View>
    )
}

您的

useState

错误。就像

const [stateProperty, setStateProperty] = useState();

在您的情况下，

Sunday\u formatted

是状态属性（值），而

nextSunday

是更改

Sunday\u formatted

（setter函数）

的方法，您可以使用

const

进行

useState