不会在按下按钮 React Hooks 时呈现组件

Question

我有下一个代码。

import React, { useState, useEffect } from 'react';
import Opciones from './Opciones'
import './TableColumnas.scss';
const TableColumnas  = ({data, distribuida}) => {

const addOption = (i, j) => {
data.tiempo_comida[i].columnas[j].push("Hello");
console.log(data);
}
const addColumn = (i, j) => {
data.tiempo_comida[i].columnas.push([]);
console.log(data);
}
const change = (e, i, j, k) => { //e: event
if(k){
data.tiempo_comida[i].columnas[j][k] = e.target.value;
}else{
data.tiempo_comida[i].columnas[j][0] = e.target.value;
}
}
return(
<>
<table className="content-table">
<tbody>
<>
{data.tiempo_comida.map((grupo_comidas,i)=>(
<>
<tr key={i}>
<p>{grupo_comidas.nombre_tiempo.label}</p>
</tr>
<tr>
{grupo_comidas.columnas.map((comidas, j)=>(
<>
<td key={j}>
{(comidas.length !== 0) ?
comidas.map((comida,k)=>(
<>
{console.log(comida)}
<div className="container" key={k}>
<div className="input">
<input type="text" placeholder="Text" defaultValue={comida} onChange={(e) => {change(e, i, j, k)}}/>
</div>
</div>
</>
))
:
<>
<div className="container">
<div className="input">
<input type="text" placeholder="Text" onChange={(e) => {change(e, i, j)}}/>
</div>
</div>
</>
}
<button onClick={()=>{addOption(i, j)}}>
+option
</button>
</td>
</>
))}
<button onClick={()=>{addColumn(i)}}>
+column
</button>
</tr>
</>
))}
</>
</tbody>
</table>
</>
)
}
export default TableColumnas;

并且道具中接收的数据如下

var tiempo_comida = [{
nombre_tiempo:{
name: "desayuno",
label: "Desayuno",
image: "desayuno",
color: "#EDC940"
},
columnas:[[],['jugo','cafe'],['tortillas','pan']]
},{
nombre_tiempo:{
name: "colacion1",
label: "Colación",
image: "colacion1",
color: "#54BDE9"
},
columnas:[['huevo','tocino','queso'],['jugo','cafe'],['tortillas','pan']]
},{
nombre_tiempo:{
name: "comida",
label: "Comida",
image: "comida",
color: "#72BEB2"
},
columnas:[['huevo','tocino','queso'],['jugo','cafe'],['tortillas','pan']]
},{
nombre_tiempo:{
name: "colacion2",
label: "Colación",
image: "colacion2",
color: "#4868AC"
},
columnas:[['huevo','tocino','queso'],['jugo','cafe'],['tortillas','pan']]
},{
nombre_tiempo:{
name: "cena",
label: "Cena",
image: "cena",
color: "#9563A3"
},
columnas:[['huevo','tocino','queso'],['jugo','cafe'],['tortillas','pan']]
},
]

如果我按下按钮添加选项或列并取出数据控制台.log会给我添加 Hello 的值，但屏幕不会增加。

目标是在按下按钮时将元素添加到数组中，从而添加新的输入

Answer 1

不能直接改变道具，必须在父级中更新道具。

addOption，addColumn和change函数应该在父函数中，并作为 props 传递给这个组件。