将参数传递给另一个组件

Question

如何正确地将参数从一个组件传递到另一组件。在我的场景中，当我将pass参数登录到另一个组件时，它们的第一个字符串为空，最后一个字符串为空。应该只是实际的字符串。

组件1：

 import React, {useState, useEffect} from 'react'
 import {dataComponent} from './include/childComponent'

 export default function Parentcomponent(props) {

    const [data, setdata] = useState('');

    function functioncalhttp(){

    //data from database
    setdata(response.data);
    }

    useEffect(() => {
      functioncalhttp();
    },[]);

    return (
      <div>{<dataComponent callbackfunction={data}/>}</div>
    )
 }

组件2：

  import React, {useState, useEffect} from 'react'
  export default function dataComponent(props) {

    console.log(props.callbackfunction);

    return (
      <div></div>
    )

  }

截屏：

Answer 1

react的核心是在其状态或接收到的props改变时渲染组件的想法。道具总是在渲染时传递给组件，因此在您的情况下，data发生变化时，子组件将在data道具上收到新的callbackfunction状态，然后重新渲染。如果您要“等待”渲染子级直到数据准备就绪，下面是一个演示示例，该演示使用保护模式在满足条件时包括子级：

当组件应使用memo HOC重新渲染组件时，React还提供了一种进一步提示做出反应的方法，该HOC对接收的道具提供了更多控制，并有选择地让React知道不需要重新渲染。