Usestate 在文本标签中不起作用，并给了我相同的值 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

您可以将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(); 在每次刷新时都会运行。如果您想在初始加载时运行一次，请使用 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 函数）的方法

Answer 2

一个问题是您在 Sunday 和 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>
  )

}

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