反應模態自定義組件未顯示正確的數據

Question

我使用 react hooks 構建了這個模態組件。 但是，模態彈出時顯示的數據不正確（它始終顯示數組中最后一個元素的名稱屬性）。

//Modal.js
import ReactDOM from 'react-dom';

const Modal = ({ isShowing, hide, home_team }) => {return isShowing ? ReactDOM.createPortal(
  <React.Fragment>
    <div className="modal-overlay"/>
    <div className="modal-wrapper">
      <div className="modal">
        <div className="modal-header">
        <a>Home team: {home_team}</a>
          <button type="button" className="modal-close-button" onClick={hide}>
          </button>
        </div>
      </div>
    </div>
  </React.Fragment>, document.body
) : null;}

export default Modal;

// 主要組件

const League = ({ league, matches }) =>{ 
    const {isShowing, toggle} = useModal(); 
    return (
    <Fragment>
        <h2>{league}</h2>
        {
            matches.map((
                { 
                    match_id,
                    country_id,
                    home_team
                }
            ) => 
            {
                return (
                    <div>
                        <p>{match_id}</p>
                        <button className="button-default" onClick={toggle}>Show Modal</button>
                        <a>{home_team}</a>
                        <Modal
                            isShowing={isShowing}
                            hide={toggle}
                            home_team={home_team}
                        />
                        <p>{home_team}</p>
                    </div>
                )
            })
        }
    </Fragment>
  )};

這是匹配數據集的樣子：

 [{
    match_id: "269568",
    country_id:"22",
    home_team: "Real Kings"
},
{
    match_id: "269569",
    country_id:"22",
    home_team: "Steenberg United"
},
{
    match_id: "269570",
    country_id:"22",
    home_team: "JDR Stars "
},
{
    match_id: "269571",
    country_id:"22",
    home_team: "Pretoria U"
},
]

我不確定發生了什么，因為數據似乎傳遞得很好。

<p>{home_team}</p>

在主要組件中每次都顯示預期的屬性，但是模態總是顯示數組中的最后一個home_team項目（例如Pretoria U）

Answer 1

您需要在 map 函數內部調用 useModal 。 否則，您將打開切換所有模態，最后一個與其他模態重疊

const HomeTeam = ({ match_id, country_id, home_team }) => {
  const {isShowing, toggle} = useModal();

  return (
    <div>
       <p>{match_id}</p>
       <button className="button-default" onClick={toggle}>Show Modal</button>
       <a>{home_team}</a>
       <Modal
         isShowing={isShowing}
         hide={toggle}
         home_team={home_team}
       />
       <p>{home_team}</p>
     </div>
   )
}

const League = ({ league, matches }) => (
  <Fragment>
    <h2>{league}</h2>
    { matches.map((match) => <Hometeam {...match} /> }
  </Fragment>
);