通过映射 Mobx 数组将可重用的 React 组件插入到另一个组件中

Question

我正在使用多个 Mobx 商店开发一个 React 应用程序（有一个 Coldfusion 后端，我很幸运）。 我创建了一个可重用的组件，我试图根据用户的选择动态插入它。 我正在拉入一个 Mobx 数组（并对其进行切片），然后尝试 map 以便使用来自数组中对象的道具创建该组件的多个版本。 当我使用 forEach 时，它不会引发错误，但也不会显示任何内容。 我已经检查（通过控制台日志）数据是作为对象数组传入的，它看起来和我期望的一样。 当我尝试使用.map 时，我无法弄清楚为什么它会抛出错误，或者在使用 forEach 时不显示任何内容。 或者也许我应该采取不同的方法？

下面的所有代码都经过简化，仅包含一个非常复杂的应用程序的相关片段 - 请询问您是否需要查看更多内容。

在商店中观察到：

@observable panelData = this.getPanelData();
  getPanelData() {
    return {
      formData: {
        sample: {
          showFilterOptions: false,
          filterOptionsArray: []
        }
        ,
        result: {
          showFilterOptions: false,
          filterOptionsArray: []
        }
      }
    }
  }

商店中有一个 function ，我必须在其中循环用户所做的选择并对每个选择进行获取请求（这是编写 cfc 的方式）。 在.done 中，我将每个 object 添加到数组中，如下所示（以下所有内容都在 Promise 内 - 在解决 promise 后，showFilterOptions 设置为 true）

filterSelections.forEach((filterName)=>{
      let filterObject = {};
      makeGetRequest({
       [sending through data here]
      }).done((response)=>{
        if(response.status == 'success') {
          filterObject = {
            filterName: filterName,
            displayType: response.displayType,
            optionsArray: response.object
          };
          formData.sample.filterOptionsArray.push(filterObject);
        }
      });
})

我试图插入子组件的应用程序中的组件：

@inject("rootStore")
@observer
class OptionsPanel extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const sampleFilterOptions = myStore.panelData.formData.sample.filterOptionsArray.slice();
   return (
    myStore.panelData.formData.sample.showFilterOptions &&
     sampleFilterOptions.map((item, index)=> {
                        return (
                            <OptionsComponent
                                key={index}
                                label={item.filterName}
                                displayType={item.displayType}
                                optionsArray={item.optionsArray}/>
                        )
      })
    )
  }
}

和我正在尝试插入的组件：

@inject("rootStore")
@observer
class OptionsComponent extends Component {
    constructor(props) {
        super(props);

    }


    render() {
        const displayType = this.props.displayType;

        return (
            <Fragment>
            {displayType == "DS" &&
            <>
                <DuelingSelect                   
                    availableHeading={"Available" + this.props.label}
                    selectedHeading={"Selected" + this.props.label}
                />                
            </>
            }
            {displayType == "multi-select" &&
            <>
                <FormGroup                    
                    options={this.props.optionsArray}
                    value={""}
                    multi={true}
                    placeholderText={`${this.props.label}(s)`}
                    onChange={(options) => {}}
                    required={false}
                />                
            </>
        )
    }
}

Answer 1

我的猜测是因为填充方法是异步调用......渲染时数据不存在。 尝试添加一些 null 检查以确保它在不存在时不会出错，而是显示加载或消息。

除此之外，您应该检查您尝试 map 的值（通过控制台日志）以确保它是您期望的阵列。