Usestate 在 Text Label 中不起作用，并给我相同的值 React native hooks

Question

我制作了一个从周日到周六显示的周历。问题是文本值不会更改，即使它在 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>
        
        )
  
}

Answer 1

好吧，一个问题是您在星期日和 Sunday_formatted 中都保持星期日状态，这可能会导致问题。

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>
  )

}

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

Answer 2

您可以将 const 用于 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>
    )
}

还要记住每次刷新时 let [Sunday, Saturday] = getWeek(); 运行s。如果你想运行它在初始加载时用 useEffect 包起来而不依赖并分配给格式化数据。

React.useEffect(() => {
    const [Sunday, Saturday] = getWeek();

    nextSunday(moment(Sunday).add(7, 'days').format('DD'));
    nextSaturday(moment(Saturday).add(7, 'days').format('DD.MMMM'));
}, []);

function changeData () {
    nextSunday(moment(Sunday_formatted).add(7, 'days').format('DD'));
    nextSaturday(moment(Saturday_formatted).add(7, 'days').format('DD.MMMM'));
}

你 useState 错了。就像

const [stateProperty, setStateProperty] = useState();

在您的情况下 Sunday_formatted 是状态属性（值），nextSunday 是更改方法 Sunday_formatted（setter 函数）

Usestate 在 Text Label 中不起作用，并给我相同的值 React native hooks

Usestate does not work in Text Label and gives me the same value React native hooks

calendar

momentjs

reactjs

react-native

use-state