第二次点击后 Modal 没有显示在我的 react boostrap 表中

问题描述

我使用 react boostrap 表，但在我单击一次后，第二次单击我的表时，模态没有显示。

这是我的表格组件

const CustomTable = ({ setStateName,setShouldShow }) => {

  const handleTdClick = ( {name} ) => {
    setStateName(name);
    setShouldShow(true);
    
  };

  return (
    <Table striped bordered hover variant="dark" size="sm">
      <thead>
        <tr>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          { estados.map(e => (
              <td key={e.id} onClick={ () => handleTdClick(e)}>
              {e.name}
              </td>
          ))}
        </tr>
      </tbody>
    </Table>
  );
};

这是调用模态和表格以及'''shouldShow```等的父组件

const MexiMap = () => {

  const [stateName,setStateName] = useState('');
  const [shouldShow,setShouldShow] = useState(false);

  const chartEvents = [{
    eventName: "ready",callback: ({ chartWrapper,google }) => {
      const chart = chartWrapper.getChart();
      google.visualization.events.addListener(chart,"select",e => {
        const id = chart.getSelection()[0].row;
        const name = getNombreEstadobyId(id);
        setStateName(name);
        setShouldShow(true);
        setShouldShow(false);
        
      });
    }
  }]

  const options = {
    region: 'MX',resolution: 'provinces',colorAxis: { colors: ['#00853f','black','#e31b23'] },backgroundColor: '#FFFFFF',datalessRegionColor: '#eeeeee',defaultColor: 'white',}

  return (
    <>
      <Chart
        width={'1500px'}
        height={'900px'}
        chartType="GeoChart"
        data={data}
        options={options}
        chartEvents={chartEvents}
      />

      <CustomModal name={stateName} showModal={shouldShow} />
      

      <CustomTable setStateName={setStateName} setShouldShow={setShouldShow} />
    </>
  );
};

export default MexiMap;

这是模态组件：

const CustomModal = ({ name,showModal }) => {

  const [show,setShow] = useState(showModal);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(() => {
    showModal && setShow(true);
  },[showModal]);

  return (
    <>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{name}</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo,you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default CustomModal;

谁能帮助我，如何修复表格，以便每次点击表格时都会显示模态。

解决方法

我认为问题在于父级和子级的模态状态变得不同步。

特别是在子组件中，CustomModal 组件：

const CustomModal = ({ name,showModal }) => {
  const [show,setShow] = useState(showModal);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(() => {
    console.log(showModal);
    showModal && setShow(true);
  },[showModal]);

  // ...
};

当 shouldShow（父）组件中的 MexiMap 状态更新时，这会正确反映在模态行为中，因为第一次单击会打开模态。关闭模态时调用 handleClose，它将 show 设置为 false。

问题在于这个状态对于 CustomModal 来说是局部的。父组件不知道模态状态已更改，因为 show 已更改而不是 shouldShow。 show 和 shouldShow 表示相同的信息，因此这些状态不应具有不同的值。

您可以做的是将父组件的 setShouldShow 传递给 CustomModal（子）组件并使用此函数更新 showModal 状态。

以下是该方法的简化示例：

const CustomModal = ({ name,showModal,setShowModal }) => {
  const handleClose = () => setShowModal(false);
  const handleShow = () => setShowModal(true);

  return (
    <>
      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{name}</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo,you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default function App() {
  const [shouldShow,setShouldShow] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setShouldShow(!shouldShow)}>Click</button>
      <CustomModal showModal={shouldShow} setShowModal={setShouldShow} />
    </div>
  );
}

这样我们就有了单一的事实来源，shouldShow 状态告诉我们是否应该显示模态。

这是一个 sandbox，其中包含上述实现和重现问题的原始代码的简化版本。