Javascript 无法将数据从chlid组件使用到父组件？

我制作了这个react应用程序，其中有一个父组件为

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;

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不是函数

---

有人能帮我解决我弄错的地方吗？我不确定在ResultPanel组件中调用PanelOfResult回调方法的位置。

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

首先，将状态声明移动到父组件，并删除变量。整个

PanelOfResult

是不必要的，也是一种糟糕的做事模式

函数应用程序（）{
常量[firstvalueoftextarea，setfirstvalueoftextarea]=React.useState(
“你好，世界”
);
const[secondvalueoftextarea，setsecondvalueoftextarea]=React.useState（“”）；

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

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

一般来说，您不应尝试使用

var

，而应使用

let

或

const

---

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

好吧，谢谢您的回答。但首先，我的初始代码完全相同，工作非常完美。我之所以将ResultPanel作为一个单独的组件移动，是因为在更改状态时，整个应用程序正在重新呈现自身这将最终重新渲染第二个和第三个组件。这是我不需要的。我通过在componentShouldUpdate方法中返回false来防止第二个和第三个组件重新渲染。但是，当我只想重新渲染其中的一部分时，整个应用程序组件重新渲染时该怎么办（这就是为什么生成单独的组件。）？建议是好的。我不知道其他两个子组件的强度有多大，但除非他们做了很多工作，否则重新渲染似乎可以忽略不计。但除此之外，所有三个子组件都在使用该状态，因此当状态更改时，他们需要重新渲染，无论状态处于何处，因为他们的道具都会更改。