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']]
},
]

如果我按下按钮添加选项或列并取出数据控制台，日志会为我提供添加了Hello的值，但屏幕不会增加。

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

Answer 1

You cannot mutate props directly，您必须在父级中对其进行更新。

addOption，addColumn和change函数应位于父级中并作为道具传递给此组件。

按下按钮时不渲染组件

1 个答案: