MATERIAL-TABLE 的 LOOKUP 属性不会改变 initialValue答案

【问题标题】：LOOKUP property of MATERIAL-TABLE doesn't change initialValueMATERIAL-TABLE 的 LOOKUP 属性不会改变 initialValue
【发布时间】：2020-03-18 20:30:48
【问题描述】：

朋友们下午好对不起，我正在尝试更新材料表库中我的 CARD_ID 列的 LOOKUP 属性，因为我必须从 API 查阅这些数据，所以我创建了一个名为 setObj 的钩子，我用它来更新该属性的状态，但它仍然没有改变它的初始值，因此我的 LOOKUP 没有改变值，有人知道为什么吗？

import React, { useEffect, useState } from 'react';
import MaterialTable from 'material-table';
import { Button } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { showCards } from 'js/actions/cardAction';

export default function MaterialTableDemo(props) {
  const { concentrator } = props;
  const dispatch = useDispatch();

  const cards = useSelector(state => state.cards.cards);

  const onSubmit = values => {
    //dispatch(postForm(values));
    console.log('DATA: ', values);
  };

  const [obj, setObj] = useState({});

  console.log(obj);
  const [state, setState] = React.useState({
    columns: [
      { title: 'Fase', field: 'phase', type: 'numeric', editable: 'never' },
      { title: 'Tarjeta', field: 'card_id', lookup: obj },
      { title: 'Entrada', field: 'input' },
      {
        title: 'Medicion',
        field: 'unit',
        lookup: { CORRIENTE: 'Corriente', VOLTAJE: 'Voltaje' }
      },
      {
        title: 'Relacion',
        field: 'relation',
        lookup: {
          '50:1': '50:1',
          '100:1': '100:1',
          '200:1': '200:1',
          '500:1': '500:1',
          '1000:1': '1000:1',
          '50:5': '50:5',
          '100:5': '100:5',
          '200:5': '200:5',
          '500:5': '500:5',
          '1000:5': '1000:5'
        }
      },
      { title: 'Offset', field: 'offset', type: 'numeric' },
      { title: 'Ajuste', field: 'ajust', type: 'numeric' }
    ],
    data: [
      {
        phase: 'A',
        card_id: '',
        input: '',
        unit: '',
        relation: '',
        offset: '',
        ajust: ''
      }
    ]
  });

  useEffect(() => {
    dispatch(showCards(concentrator));
    setObj(
      cards.reduce(function(acc, cur, i) {
        acc[cur.id] = cur.name;
        return acc;
      }, {})
    );
  }, []);

  return (
    <div>
      <MaterialTable
        columns={state.columns}
        data={state.data}
        editable={{
          onRowAdd: newData =>
            new Promise(resolve => {
              setTimeout(() => {
                resolve();
                const data = [...state.data];
                data.push(newData);
                setState({ ...state, data });
              }, 600);
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise(resolve => {
              setTimeout(() => {
                resolve();
                const data = [...state.data];
                data[data.indexOf(oldData)] = newData;
                setState({ ...state, data });
              }, 600);
            }),
          onRowDelete: oldData =>
            new Promise(resolve => {
              setTimeout(() => {
                resolve();
                const data = [...state.data];
                data.splice(data.indexOf(oldData), 1);
                setState({ ...state, data });
              }, 600);
            })
        }}
        options={{
          pageSize: 10,
          pageSizeOptions: [5, 10, 20, 30, 50, 75, 100]
        }}
        options={{
          search: false
        }}
        title=" "
      />
      <Button
        color="secondary"
        onClick={() => onSubmit(state.data)}
        style={{ marginTop: '20px', width: '100%' }}
        variant="contained"
      >
        Guardar Puerto 1
      </Button>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs react-hooks use-effect material-table

【解决方案1】：

根据您提供的示例，您不需要使用查找功能。

 lookup: {
      '50:1': '50:1',
      '100:1': '100:1',
      '200:1': '200:1',
      '500:1': '500:1',
      '1000:1': '1000:1',
      '50:5': '50:5',
      '100:5': '100:5',
      '200:5': '200:5',
      '500:5': '500:5',
      '1000:5': '1000:5'
 }

你的Id和值一样，所以完全不需要查找。

【讨论】：