In react, how to receive and render data in subpage

[OwenQC]

Does Postmate.Model's options can monitor but cant change data in react?

My need is to monitor the data sent by the parent page in the subpage(iframe), and display the data on the subpage after receiving. The childAPI in Postmate.Model().then() does not have an "on" function like new Postmate().then(), so I put the eventListener-"count" in options, when I get the data and use setState to change it, data can be changed, but the dom does not render this data . T-T。

Am I use the wrong way?

// iframe export default function View() { const [countFromParent, setCountFromParent] = useState(0); useEffect(() => { new Postmate.Model({ count: (data) => { console.log("received:", data) // data has received setCountFromParent(data); } }); }, []) console.log("countFromParent:", countFromParent) // countFromParent has changed return ( // but there's actually no rendering <h1> {countFromParent }</h1> ); }

[OwenQC]

It's not about react. This is because the iframe configured in the parent page is automatically generated instead of using an existing iframe.So no changes will be made to the iframe already on the page.

[Nine-Rice]

I have encountered a scenario that can reproduce this situation:

const CONTAINER_ID = 'container_id'
new Postmate({
    container: document.getElementById(CONTAINER_ID),
    url:'xxx',
    name: 'xxx',
});

// ❌ Actually, it's not necessary to use the<iframe>tag
const ParentPage = () => {
  return (
      <div> 
         <iframe id={CONTAINER_ID}></iframe>
      </div>
  )
}

// ✅
const ParentPage = () => {
  return <div id={CONTAINER_ID}></div>
}

Because the source code will automatically add iframe elements to your container: https://github.com/dollarshaveclub/postmate/blob/f267096b59d469757932dd14c41f72b5c3341413/src/postmate.js#L274