javascript - 卡片 onclick 组件未呈现

Question

我正在使用卡。单击我要渲染到新组件的组件。我已经为它写了下面的代码 -

function RenderToDetails() {       
  return (<ItemDetails></ItemDetails>);
}

const renderCardInfo = (card,index) => {
  return(
    <Card tag="a" key={index} style={{display:'flex', width:'25%', flexWrap:'nowrap', float:'left', cursor: "pointer"}} onClick={RenderToDetails}>
      <CardBody>
        <CardTitle> {card.value} </CardTitle>
      </CardBody>
    </Card>      
  );
};

我可以看到RenderToDetails函数被调用，但也看不到组件被渲染或在控制台上抛出任何错误。

ItemDetails点击卡片后如何渲染？

编辑 1：Dashboard.js 的完整代码

import React,{useEffect,useState} from 'react'
import axios from 'axios'
import { Card,CardBody, CardTitle } from 'reactstrap';
import ItemDetails from './ItemDetails';


function Dashboard() {
  const initialState = {
      data: [],
      renderToDetails: false
  };

  const [state, setstate] = useState(initialState);
  useEffect(() => {
    const data=[];
      const getData=async () => {
        await axios.get('https://localhost:44301/api/Login/GetItems')
        .then(function (res) {                 
            for (let key in res.data) { 
              data.push({...res.data[key],id:key}); 
            }
            setstate({ data:data });
        });
      }
      getData();
  }, []);

    function RenderToDetails() {       
      return (
        <ItemDetails></ItemDetails>
      );
    }

    const renderCardInfo = (card,index) => {
      return (
        <Card tag="a" key={index} style={{display:'flex',width:'25%',flexWrap:'nowrap',float:'left',cursor: "pointer"}} onClick={RenderToDetails}  >
          <CardBody>
              <CardTitle> {card.value} </CardTitle>
          </CardBody>
        </Card>
      );
    };

    return (
      <>
        { state.data.map(renderCardInfo) }
      </>
    );
}

export default Dashboard;

标签： javascriptreactjs

Answer 1

在 onClick 事件中调用RenderToDetails函数不会在仪表板中呈现组件。基本上，你从来没有告诉 react 何时何地渲染你的组件。

因此，您需要将组件添加到渲染函数并切换 showInfo 状态以隐藏/取消隐藏组件。

使用下面的代码 -

import React,{useEffect,useState} from 'react'
import axios from 'axios'
import { Card,CardBody, CardTitle } from 'reactstrap';
import ItemDetails from './ItemDetails';


function Dashboard() {
  const initialState = {
      data: [],
      renderToDetails: false,
      showInfo: false
  };

  const [state, setstate] = useState(initialState);

  useEffect(() => {
    const data=[];
      const getData=async () => {
        await axios.get('https://localhost:44301/api/Login/GetItems')
        .then(function (res) {                 
            for (let key in res.data) { 
              data.push({...res.data[key],id:key}); 
            }
            setstate({ data:data });
        });
      }
      getData();
  }, []);

    function RenderToDetails() {       
      return (
        <ItemDetails></ItemDetails>
      );
    }

    const renderCardInfo = (card,index) => {
      return (
        <Card tag="a" key={index} style={{display:'flex',width:'25%',flexWrap:'nowrap',float:'left',cursor: "pointer"}} onClick={() => setstate({...state, showInfo: !state.showInfo})}  >
          <CardBody>
              <CardTitle> {card.value} </CardTitle>
          </CardBody>
        </Card>
      );
    };

    return (
      <>
        { state.data.map((card, index) => renderCardInfo(card, index)) }
        { state.showInfo && RenderToDetails()}
      </>
    );
}

export default Dashboard;