通過單擊渲染具有不同狀態的組件

所以我試圖通過在切換點擊上設定它的狀態來重新渲染一個組件。

這是我的代碼，我使用 useEffect 設定 3 種狀態“??會議”、“顯示會議”和“所有會議”，并且我給“顯示會議”提供與“會議”相同的狀態。當我單擊 Toggle 時，我希望“displayMeetings”處于“meetings”或“allMeetings”狀態，并且我確實在 console.log 中得到它（不是第一次點擊的想法）。

如果覺得我只是每次都重新渲染整個組件并呼叫 useEffect 導致一遍又一遍地重新制作第一個狀態，但我不太確定..

（ps：使用“displayMeetings”是我最后一次嘗試，在此之前我嘗試來回改變“會議”的狀態沒有成功）

謝謝你。

import * as React from 'react';
import { useState, useEffect } from 'react';
import { Box, CardHeader, ToggleButton, ToggleButtonGroup, Stack } from '@mui/material';
import useLocales from '../../hooks/useLocales';
import '../../style/style.css';
import UpcomingMeeting from './UpcomingMeeting';
import * as  API from '../../api/api_call';



// ----------------------------------------------------------------------

export default function UpcomingMeetings() {
  const { translate } = useLocales();
  const [meetings, setMeetings] = React.useState('');
  const [allMeetings, setAllMeetings] = React.useState('');
  const [alignment, setAlignment] = React.useState('myMeetings');
  const [displayMeetings, setDisplayMeetings] = React.useState('');


  const handleChange = (event, newAlignment) => {
    setAlignment(newAlignment)
    if(alignment === 'myMeetings'){
      setDisplayMeetings(meetings)
      console.log(displayMeetings)
    }else{
      setDisplayMeetings(allMeetings)  
      console.log(displayMeetings)  
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      const response = await API.getUpcomingMeetings();
      setMeetings(response.data.data);
      setDisplayMeetings(response.data.data);
      const responseAll = await API.getAllUpcomingMeetings();
      setAllMeetings(responseAll.data.data);
    }  
    fetchData()
      .catch(console.error);;
  }, []);

  return (
    <Box>
      <ToggleButtonGroup value={alignment} onChange={handleChange}>
        <ToggleButton value="myMeetings">My Meetings</ToggleButton>
        <ToggleButton value="allMeetings">All Meetings</ToggleButton>
      </ToggleButtonGroup>
      <Box> 
        {displayMeetings === '' ? null :
        <UpcomingMeeting meetings={meetings} />}
      </Box>
    </Box>
  );
}

uj5u.com熱心網友回復：

import * as React from 'react';
import { useState, useEffect } from 'react';
import { Box, CardHeader, ToggleButton, ToggleButtonGroup, Stack } from '@mui/material';
import useLocales from '../../hooks/useLocales';
import '../../style/style.css';
import UpcomingMeeting from './UpcomingMeeting';
import * as  API from '../../api/api_call';



// ----------------------------------------------------------------------

export default function UpcomingMeetings() {
  const { translate } = useLocales();
  const [meetings, setMeetings] = React.useState('');
  const [allMeetings, setAllMeetings] = React.useState('');
  const [alignment, setAlignment] = React.useState('myMeetings');
  const [displayMeetings, setDisplayMeetings] = React.useState('');


  const handleChange = (event, newAlignment) => {
    setAlignment(newAlignment)
    if(alignment === 'myMeetings'){
      setDisplayMeetings(meetings)
      console.log(displayMeetings)
    }else{
      setDisplayMeetings(allMeetings)  
      console.log(displayMeetings)  
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      const response = await API.getUpcomingMeetings();
      setMeetings(response.data.data);
      setDisplayMeetings(response.data.data);
      const responseAll = await API.getAllUpcomingMeetings();
      setAllMeetings(responseAll.data.data);
    }  
    fetchData()
      .catch(console.error);;
  }, []);
//change meetings to displayMeetings (was an error)
  return (
    <Box>
      <ToggleButtonGroup value={alignment} onChange={handleChange}>
        <ToggleButton value="myMeetings">My Meetings</ToggleButton>
        <ToggleButton value="allMeetings">All Meetings</ToggleButton>
      </ToggleButtonGroup>
      <Box> 
        {displayMeetings === '' ? null :
        <UpcomingMeeting meetings={displayMeetings} />}
      </Box>
    </Box>
  );
}

標籤：反应 使用效果

上一篇：如何更改反應組件中當前地圖項的狀態

下一篇：將調度函式作為回呼傳遞給另一個實體屬性，以便稍后執行