TypeError：无法通过useEffect和Tabulator读取未定义的属性''

Question

这里是codesandbox for the problem。

该示例包括三个部分：

• 反应功能组件。
• Vanilla JS grid library。
• useEffect将两者结合在一起。

一个useEffect实例化网格，而另一个监听状态更改以更新网格。

在row is clicked in the grid library之前一切正常。

我收到此错误。

TypeError: Cannot read property 'companyName' of undefined

  471 | id={"input-companyName"}
  472 | list={"options-companyName"}
  473 | className={"form-input"}
> 474 | value={formJournalItems.companyName}
  475 | onChange={handleDatalistChange}
  476 | onKeyUp={handleKeyUp}
  477 | ref={refCompanyName}


  325 | 
  326 |    function handleTableRowClick(journalItemId) {
  327 |        let journalItem = journalItems.filter(item => item.id === journalItemId)[0]
> 328 |        setFormJournalItems(journalItem)
  329 |    }
  330 | 
  331 |    function isValidFormInputs() {

这里是有问题的代码，其余的可以在codesandbox中看到。

let refCompanyName = React.createRef();

let refTable = useRef(null);
let table = useRef(null);

const [journalItems, setJournalItems] = useState([]);

const initialFormJournalItems = {
        id: "",
        journalId: "",
        companyId: "",
        companyName: "",
        documentKey: "",
        documentDate: "",
        debitAccountId: "",
        debitAccount: "",
        debit: "",
        creditAccountId: "",
        creditAccount: "",
        credit: ""
    }

const [formJournalItems, setFormJournalItems] = useState(initialFormJournalItems);

useEffect(() => {
         table.current = new Tabulator(refTable.current, {
            data: journalItems,
            height: "100%",
            layout: "fitColumns",
            rowClick: function (e, row) {
                //e - the click event object
                //row - row component
                console.log("tabulator journalitems", journalItems) // <------ EMPTY []
                console.log(row._row.data)
                handleTableRowClick(row._row.data.id)
            },
            columns: [
                { title: "Компанија", field: "companyName" },
                { title: "Документ", field: "documentKey" },
                { title: "Датум", field: "documentDate" },
                { title: "Должи", field: "debitAccount" },
                { title: "Износ", field: "debit" },
                { title: "Побарува", field: "creditAccount" },
                { title: "Износ", field: "credit" },
            ],
        });

    }, []);

// Updates the tabulator table on item change
    useEffect(() => {
        console.log("useEffect journalItems", journalItems) // <------ POPULATED
        console.log("useEffect refTable", refTable)
        console.log("useEffect table", table)
        table.current.replaceData(journalItems)
    }, [journalItems]);

function handleTableRowClick(journalItemId) {
    let journalItem = journalItems.filter(item => item.id === journalItemId)[0]
    setFormJournalItems(journalItem)
}

return (
    <div>
        <input
            type={"text"}
            name={"companyName"}
            id={"input-companyName"}
            list={"options-companyName"}
            className={"form-input"}
            value={formJournalItems.companyName}
            onChange={handleDatalistChange}
            onKeyUp={handleKeyUp}
            ref={refCompanyName}
            multiple
         />
    </div>
)

Answer 1

问题是journalItems从未填充，因此，当调用handleTableRowClick时，它将尝试查找项目。找不到任何内容，因此它使用未定义的值调用setFormJournalItems。您可以暂时采取以下措施来解决此问题，但最终您需要填充journalItems。

function handleTableRowClick(journalItemId) {
  let journalItem = journalItems.find(item => item.id === journalItemId);
  if (journalItem) {
    setFormJournalItems(journalItem)
  }
}