组件不是从映射状态呈现的

贪婪94

我想通过“板”进行映射并创建足够数量的“单元”组件，因为“板”很长。

这是代码：

function Grid({ player }) {
  const [board, boardSet] = useState([11, 2, 3]);
  const [cellsFill, cellsFillSet] = useState([
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 4, 8],
    [2, 4, 6],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
  ]);
  return (
    <section className="grid">
      {board &&
        board.map((el) => {
          return <Cell player={player} cellFillSet={boardSet}></Cell>;
        })}
    </section>
  );
}

当我在通过“board”映射时尝试使用 console.log 时，我得到了很好的数字，但仍然没有出现“Cell”。

PS：我现在关于将密钥添加到列表中，为了清除它被删除

编辑：问题出在“Cell”组件内：

function Cell({ player, cellFillSet }) {
  const [filled, filledSet] = useState(null);
  const fill = async () => {
    turnSet((prev) => prev + 1);
  };
  useEffect(() => {
    cellFillSet(filled); //heres a problem, should be cellFillSet([filled])
  }, [filled]);
  return (
    <div className="cell" onClick={fill}>
      {filled}
    </div>
  );
}

马吉德 M。

尝试这个：

 function Grid({ player }) {
  const [board, boardSet] = useState([11, 2, 3]);
  const createCellComponent = () =>
  { 
    if(board)
        return board.map((el) => {
            return <Cell player={player} cellFillSet={boardSet}></Cell>;
        })
  } 
  return (
    <section className="grid">
      {createCellComponent()}
    </section>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。