reactjs 将数据从子组件传递到父组件

hs1rzwqc 于 2023-11-18 发布在 React

关注(0)|答案(2)|浏览(156)

我试图将信息从子组件传递到父组件，并且我希望每当子组件中的信息发生变化时都能这样做。
到目前为止，我所做的似乎不起作用。config的值确实在子组件中得到更新，但data的值在父组件中从未得到更新。
我做错了什么？
以下是我的父母（删减版）：

function App() {
  const version = process.env.VERSION;

  const [data, setData] = React.useState(null)

  const childToParent = (childData) => {
    setData(childData)
  }

  console.log(data)

  return (
          <Container data-testid="containerId" childToParent={childToParent} />
        <Footer data-testid="footerId" version={version} config={data} />
  );
}

export default App;

字符串
这是我的孩子（缩小版）：

const Container = (childToParent) => {

    // config comes from an API call

    React.useEffect(() => {
        () => childToParent({config});
    }, [config]);

    return (
        <other components/>
    )
}

型

reactjs

来源：https://stackoverflow.com/questions/77501247/pass-data-from-child-component-to-parent

2条答案

按热度按时间

hfyxw5xn1#

1.您的Container组件中的props没有被正确地解构。

useEffect依赖数组中存在错误。
让我们纠正这些问题：
1.在Container组件中，props需要正确地解构才能访问childToParent。

const Container = ({ childToParent }) => {
  // config comes from an API call
  const [config, setConfig] = React.useState(null);

  // Simulating API call
  React.useEffect(() => {
    // Replace this with your actual API call
    // For simulation purposes, I'll use a setTimeout
    const fetchData = () => {
      // Simulated API response
      const response = { config: /* your config data here */ };
      setConfig(response.config);
    };

    fetchData();
  }, []);

  React.useEffect(() => {
    childToParent(config); // Sending config to the parent
  }, [config, childToParent]);

  return (
    <div>
      {/* Other components */}
    </div>
  );
};

字符串
1.在父组件（App）中，需要将childToParent函数正确传递给Container组件。

function App() {
  const version = process.env.VERSION;
  const [data, setData] = React.useState(null);

  const childToParent = (childData) => {
    setData(childData);
  };

  console.log(data);

  return (
    <div>
      <Container childToParent={childToParent} />
      <Footer version={version} config={data} />
    </div>
  );
}

export default App;

型
通过这些调整，现在只要config值发生更改，来自Container组件的config数据就应该正确更新父（App）组件中的data状态。

赞(0）回复(0）举报 2023-11-18

mlmc2os52#

首先你必须从props中解构childToParent;
下面是示例代码：

import React from 'react';

const Container = (props) => {
  const { childToParent } = props;

  const data = 1;
 
  const handleClick = () => {
     childToParent(data);
  }

  return (
    <div>
      <button onClick={handleClick}>Trigger Function</button>
    </div>
  );
}

export default Container;

字符串
或者直接用曲撑破坏

const Container = ({childToParent}) => {}

型

赞(0）回复(0）举报 2023-11-18

我来回答

reactjs 将数据从子组件传递到父组件

2条答案

相关问题

热门标签

最新问答