无法使用从子组件到父组件的数据？

Question

我制作了这个反应应用程序，其中有一个父组件为App.js，它具有三个子组件。第一个子组件的某些状态正在被父组件中的其他两个子组件更改。

所以首先我在父组件中传递状态，然后将它们作为道具传递给其他两个子组件。这是我的一段代码。

这是我的App.js

function App() {
  var firstvalueoftextarea,
    setfirstvalueoftextarea,
    secondvalueoftextarea,
    setsecondvalueoftextarea;

  var PanelOfResult = function(
    firstvalueoftextarea,
    setfirstvalueoftextarea,
    secondvalueoftextarea,
    setsecondvalueoftextarea
  ) {
    firstvalueoftextarea = firstvalueoftextarea;
    setfirstvalueoftextarea = setfirstvalueoftextarea;
    secondvalueoftextarea = secondvalueoftextarea;
    setsecondvalueoftextarea = setsecondvalueoftextarea;
  };

  return (
    console.log("Rendering of component"),
    (
      <div className="App">
        <ResultPanel PanelOfResult={PanelOfResult} />

        <SecondChildComponent
          valueoftextarea={firstvalueoftextarea}
          setvalueoftextarea={setfirstvalueoftextarea}
        />
        <ThirdChildComponent
          className="Symbols"
          firstvalueoftextarea={firstvalueoftextarea}
          setfirstvalueoftextarea={setfirstvalueoftextarea}
          secondvalueoftextarea={secondvalueoftextarea}
          setsecondvalueoftextarea={setsecondvalueoftextarea}
        />
      </div>
    )
  );
}

export default App;

这是我的ResultPanel.js

import React from "react";

function ResultPanel(props) {
  const [firstvalueoftextarea, setfirstvalueoftextarea] = React.useState(
    "Hello World"
  );
  const [secondvalueoftextarea, setsecondvalueoftextarea] = React.useState("");

  props.PanelOfResult(
    firstvalueoftextarea,
    setfirstvalueoftextarea,
    secondvalueoftextarea,
    setsecondvalueoftextarea
  );

  return (
    <div>
      <h1>{firstvalueoftextarea}</h1>
    </div>
  );
}

export default ResultPanel;

ResultPanel 组件的状态可以通过 SecondChildComponent 和 ThirdChildComponent 更改，并且这些组件代码工作正常。

当 SecondChildComponent 尝试更改 ResultPanel 的状态时，我收到错误 - TypeError: this.props.setvalueoftextarea is not a function

谁能帮我解决我的错误？我不确定在 ResultPanel 组件中哪里调用 PanelOfResult 回调方法。

Answer 1

这里有很多问题，最大的问题之一是如何为状态设置变量。

首先，将您的状态声明移至父组件，然后删除您的 var。整个PanelOfResult 是不必要的，是一种糟糕的做事模式。

function App() {
  const [firstvalueoftextarea, setfirstvalueoftextarea] = React.useState(
    "Hello World"
  );
  const [secondvalueoftextarea, setsecondvalueoftextarea] = React.useState("");

然后，不是传递回调，而是传递所需的值：

<ResultPanel firstvalueoftextarea={firstvalueoftextarea} />

这将停止您关于不是函数的错误，并消除对回调的需要。

一般情况下，您应该尽量不要使用var，而是使用let 或const。

另外，尝试更好地命名变量。驼峰式大小写或下划线都会使您的代码更具可读性。