将参数传递给另一个组件答案

【问题标题】：Pass parameters to another component将参数传递给另一个组件
【发布时间】：2019-08-01 23:48:46
【问题描述】：

如何正确地将参数从一个组件传递到另一个组件。在我的场景中，当我将我的传递参数控制台记录到另一个组件时，它们在最后一个实际字符串之前首先具有空字符串。这应该只是实际的字符串。

组件 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>
    )

  }

截图：

【问题讨论】：

Parentcomponent 中“数据”的值是多少？我认为这可能是一个时间问题，其中数据在传递之前没有设置。见：stackoverflow.com/a/55429201/2958996
数据来自数据库。在我的示例 callbackfunction={data} 上，data 的值需要传递给 dataComponent。是的，它成功通过了，但是当我控制台记录数据时，他们在控制台日志中在实际字符串数据之前有 2 或 3 个空字符串。
渲染函数实际上可以在 react 绘制到屏幕之前被调用几次，也许子组件也被重新渲染了几次，所以它可以看到父组件的两种状态。
@DrewReese 是的。他们渲染了几次，这就是我的问题。我一次无法获取数据。
它是一个prop，每次该组件渲染时都会被传递。您是否希望孩子仅在数据实际准备好呈现时才挂载？

标签： reactjs

【解决方案1】：

React 的核心是在组件的状态或接收到的道具发生变化时渲染组件的想法。道具在渲染时总是传递给组件，因此在您的情况下，每当data 更改时，子组件将在callbackfunction 道具上接收您的新data 状态，并重新渲染。如果您想在数据准备好之前“等待”渲染子级，这里有一个使用保护模式在满足条件时包含子级的演示：

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

【讨论】：