Mobx 越界读取 x答案

【问题标题】：Mobx out of bounds read xMobx 越界读取 x
【发布时间】：2022-06-24 13:45:23
【问题描述】：

我使用下拉菜单将项目添加到 Formik FieldArray。下拉列表中有通过搜索功能从 Mobx 商店加载的项目。该项目已添加到表中，但带有关于索引超出范围的警告。

但是，如果我在页面上进行刷新并添加项目，则警告不再存在。只有当我从上一页单击指向此特定页面的链接并开始添加项目时，才会显示警告。

子组件 FieldArray 看起来像这样（简化）

const arrayHelpersRef: any = useRef();

useImperativeHandle(props.itemToAdd, () => ({
    value(item: Item) {
        arrayHelpersRef.current.push(item)
    }
}))

<FieldArray name='items'>
    arrayHelpersRef.current = fieldArrayProps
    const { push, remove, form } = fieldArrayProps
    const { values } = form
    const { items } = values
    return <>
        {items.length > 0 &&
           <Table selectable singleLine>
               <Table.Header />
               <Table.Body>
                   { items.map((item: Item, index: number) => {
                      return (
                          <Table.Row key={item.id}>
                          <Table.Cell><MyTextInput placeholder='Beskrivning' name={`items[${index}].description`} /></Table.Cell> <-- This row gives a warning

带有下拉菜单的父组件包括这个 onChange 处理程序：

const handleOnChange = (e: React.SyntheticEvent<HTMLElement, Event>, data: DropdownProps) => {
    childRef.current.value(items.find(item => item.itemNumber == data.value));
}

【问题讨论】：

标签： reactjs typescript formik mobx-react

【解决方案1】：

我遇到了类似的问题。刷新后它也消失了。

这是sn-p：

<FieldArray name='disbursementStructures'>
{({ remove, push }) => (
    <>
        {values.disbursementStructures.length > 0 &&
            values.disbursementStructures.map(
                (disbursementStructures, index) => (
                    <Table.Row key={index}>
                        <Table.Cell width={8}>
                            <MySelectInput
                                name={`disbursementStructures.${index}.businessUnitKey`}
                                options={businessUnitList}
                            />
                        </Table.Cell>

这条线给我带来了麻烦：

name={`disbursementStructures.${index}.businessUnitKey`}

我终于通过改变解决了它

values.disbursementStructures.map(
    (disbursementStructures, index) => (

到

values.disbursementStructures.map(
        (_disbursementStructures, index) => (

和

name={`disbursementStructures.${index}.businessUnitKey`}

到

name={`_disbursementStructures.${index}.businessUnitKey`}

我对 TS 和 React 还很陌生，所以我想我很幸运能用这个。 HTH。

【讨论】：