使用子箭头函数更改父级的状态，React答案

【问题标题】：Change parent's state using child arrow functions, React使用子箭头函数更改父级的状态，React
【发布时间】：2021-02-13 20:24:08
【问题描述】：

我已尝试进行研究，但在实施我找到的答案时遇到了麻烦。 1) 示例通常使用相同的 onClick 示例和 2) 他们通常使用类而不是箭头函数，我正在尝试使用。

我正在构建一个 tesseract 应用程序，其中父组件运行 tesseract。然后我试图将它发送给一个孩子，它将原始父 tesseract 数据转换为可读的东西，在这种情况下，我映射到一个数组并将其显示为父级中的 JSX 组件。那行得通，但是我遇到问题的地方是我还想向上传递并使用 useState() 将该数组保存在父组件状态中，这样我以后可以做其他工作，例如发送到 Mongo 或通过将其发送回其他孩子进行额外分析使用按钮的组件。

那么本质上，我如何将数组传递到父状态？

感谢您的帮助！

--父母--

const TesseractApp = () => {
  const [tessState, setTessState] = useState();

  const runTesseract = async (tessState) => {
    //read image
    await Tesseract.recognize(require("../images/short.png"), "eng", {
      logger: (m) => console.log(m),
    })
      //return image scanning results and then setTessState
      .then((tess) => {
        setTessState(tess);
      });
  };
  const someFunction = () => {};
  const sendToMongo = () => {};

  if (!tessState) {
    return (
      <div>
        <button className="ui button" onClick={runTesseract}>
          Run Tesseract
        </button>
      </div>
    );
  } else {
    return (
      <div>
        <div>
          <ScanForData tessValues={tessState} />
        </div>
        <button className="ui button" onClick={someFunction}>
          Run Function
        </button>
        <button className="ui button" onClick={sendToMongo}>
          sendToMongo
        </button>
      </div>
    );
  }
};
export default TesseractApp;

--孩子--

const ScanForData = (pData) => {
  let allPoints = [];

  const paras = pData.tessValues.data.paragraphs.forEach((para) => {
    allPoints.push(para.text);
  });
  return <div>{allPoints}</div>;
};
export default ScanForData;

【问题讨论】：

标签： reactjs jsx react-props

【解决方案1】：

在父母中：

const youNameOfCallback = (array) => {
  setTessState(array)
}

<ChildComponent youNameOfCallback={youNameOfCallback} />

在孩子中：

useEffect(() => {
  props.youNameOfCallback(YouArrayFromChild)
}, [])

这将在孩子被挂载时应用。

【讨论】：