第二次单击后模态未显示在我的反应 boostrap 表中

Question

我使用 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;

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

Answer 1

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

特别是在子组件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 。

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

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

这是该方法的简化示例：

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 state 告诉我们模态是否应该显示。

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