在父组件中运行具有函数的子组件答案

【问题标题】：Running a child component with a function in parent component在父组件中运行具有函数的子组件
【发布时间】：2021-09-10 15:48:40
【问题描述】：

所以我有两个组件，一个子“Board.js”，它们从后端带来一个数组并构建一个如下所示的 Board：

const Board = (props) => {
const [data, setData] = useState([]);

const newBoard = async (e) => {
    e.preventDefault();
    const data = await fetch('http://localhost:8080/viergewinnt/newboard')
        .then(response => response.json())
        .then(data => {
            // console.log(data);
            return data
        })

    const arr =[];
    data.map(d => arr.push([...d]))
    console.log(arr);
    setData(arr);
}

return (

    <div className='center'>
        <div className='board'>
            { data.map((d) => d.map((v, index) => (<BoardTile  key ={index}/>)))}
        </div>
    </div>
    )

和一个有一个按钮的父组件“NewGame”，当点击这个按钮时，必须在子组件中构建该板。父组件如下所示：

const NewGame =  (props) => {

const onClickHandler = () =>{
    return (<Board></Board>)
}

return (
    <div className="App">
        <div>
            <button className='btn' onClick={onClickHandler}>Start new game</button>
        </div>
    </div>
);

PS。当所有代码都在一个组件中时，Board 构建成功。

【问题讨论】：

您的开始新游戏按钮位于父组件中的任何特殊原因？
工作分离，学习如何:)，并确保以某种方式保持我的代码干净
我假设您正在导出 Board 组件并将其导入 NewGame？
另外，您的在应用程序内部的哪个位置呈现？您正在从 onClickHandler 返回，但这不在主渲染方法中的任何地方。

标签： reactjs react-props react-component

【解决方案1】：

import Board from './example.js';
import { useState } from 'react';

const NewGame = (props) => {
  const [boardIsVisible, setBoardIsVisible] = useState(false);

  return (
    <div className="App">
        <div>
        <button 
          className='btn' 
          onClick={() => setBoardIsVisible(true)}>
           Start new game
        </button>

        {boardIsVisible && <Board />}
       </div>
    </div>
   );
}

【讨论】：

谢谢，但现在我收到这些错误 ***react-dom.development.js:13231 未捕获的错误：对象作为 React 子项无效（发现：[object Promise]）。如果您打算渲染一组子项，请改用数组。 ***index.js:1 警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。
还有另一件事...每次点击按钮=>函数 newBoard 必须被触发（并且它在子组件中）
你需要在声明newBoard函数后实际运行它，像这样：newBoard(); - 您也可以尝试将其包装在 useEffect() 中，以便在挂载时运行一次 - useEffect(() => { newBoard(); },[]);