通过单击渲染具有不同状态的组件

Question

所以我尝试通过在切换单击时设置其状态来重新呈现组件。

这是我的代码，我正在使用 useEffect 设置 3 个状态“会议”、“displayMeetings”和“allMeetings”，并且我为“displayMeetings”提供与“会议”相同的状态。当我点击 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>
  );
}

Answer 1

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

通过单击渲染具有不同状态的组件

Render a component with different states with a click

reactjs

use-effect