Question

我是新来的人。我尝试将信息从子组件传播到父组件：

父母：

export default function App() {
  const [isLoading, setisLoading] = useState(false);

  return (
    <div className="App">
      {isLoading ? <LoadingView/> :  <MainView SetStateOfLoading={setisLoading}/>}
    </div>
  );
}

孩子：

export default function GetInformation(SetStateOfLoading) {  
   
   
   console.log(typeof SetStateOfLoading);
   SetStateOfLoading();
   console.log("SetStateOfLoading run");

    return (
        <h2>This supposed to be main view </h2>
    );
}

我得到SetStateOfLoading is not a function这个错误了吗？

谢谢，我将代码编辑为：

export default function GetInformation({SetStateOfLoading}) {

为什么我会收到此警告：

Warning: Cannot update a component (`App`) while rendering a different component (`GetInformation`). To locate the bad setState() call inside `GetInformation`, follow the stack trace as described in https: 
 //fb.me  /setstate-in-render
    in GetInformation (at App.js:16)
    in div (at App.js:15)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

？

在我的第一个小项目中，我想有一个按钮，当有人单击它时，我们调用了执行某些计算的函数。我希望当我们进入该功能时，屏幕将更改为“正在加载动画”，而当我离开该功能时，将获得格式屏幕。

在反应中这样做的正确方法是什么？

Answer 1

您在这里错了

export default function GetInformation(SetStateOfLoading) {

相反，您可能是故意的，

export default function GetInformation({ SetStateOfLoading }) {

jsx标记与包含属性作为其第一个参数的对象一起传递。

请参阅https://reactjs.org/docs/components-and-props.html

Answer 2

您的孩子应该是这样

export default function GetInformation(props) {  


  console.log(typeof props.SetStateOfLoading);
   props.SetStateOfLoading();
  console.log("SetStateOfLoading run");

return (
    <h2>This supposed to be main view </h2>
);
}

Answer 3

您刚刚犯了一个新手常犯的错误。

反应组件将道具作为Object。

export default function GetInformation({ SetStateOfLoading }) {} // Object de-structuring

或明确说明

export default function GetInformation({ props}) {
 const SetStateOfLoading = props.SetStateOfLoading;
}

将功能传递给儿童反应堆

3 个答案: