Question

有一个网格组件接收一个支持作为searchElement来渲染网格的搜索段。一些下拉选项为空，并且在安装组件后应由异步请求填充。在我在componentDidMount中调用异步获取并将新选项分配给searchElements之后，出现了问题，因为在网格组件console.log中show searchElements [0]具有作为选项的属性，其中包含包含许多元素的数组，但是当我执行console.log searchElements [0]时.options是空的！

let SearchTerms = [
    {
        key    : "supervisor",
        label  : "Supervisor",
        type   : GRID_DROPDOWN_TYPE,
        options: [],
        col    : 2
    },
.
.
.
    class CommentComponent ..... {
    ...

async componentWillMount() {
    let GetSupervisors = await fetchWith(`${entry_point}/users`, "GET", {roles: 5}, dispatch, true);
    if (GetSupervisors.ok && GetSupervisors.result['hydra:totalItems'] > 0) {
                    Supervisors = GetSupervisors.result['hydra:member'];
    }

    SearchTerms[0].options = Supervisors.map(data => ({
         value: data.id,
         label: data.fullname
    }));
}

然后我将SearchTerms传递给GridComponent

<GridComponent searchElements={SearchTerms} ...

现在在GridComponent中：

getSearchElements = () => {
        const {searchElements, preloader, process, searchMode} = this.props;
        console.log(searchElements[0]);
        let SearchElements = [];

问题在这里：当我通过Route进入CommentComponent时，一切正常，但是当我刷新页面SearchElement [0] .options为空时：(

Answer 1

使用SearchTerms作为状态

class CommentComponent ..... {
 state = {
    SearchTerms: [
    {
        key    : "supervisor",
        label  : "Supervisor",
        type   : GRID_DROPDOWN_TYPE,
        options: [],
        col    : 2
    },
}
.
.
.

  async componentWillMount() {
    let GetSupervisors = await fetchWith(`${entry_point}/users`, "GET", {roles: 
 5}, dispatch, true);
    if (GetSupervisors.ok && GetSupervisors.result['hydra:totalItems'] > 0) {
                    Supervisors = GetSupervisors.result['hydra:member'];
    }

   const newSearchTerms = [...this.state.SearchTerms]
    newSearchTerms[0].options = Supervisors.map(data => ({
         value: data.id,
         label: data.fullname
    }));
    this.setState({SearchTerms:newSearchTerms })
}

为什么嵌套数组对象在React组件中不起作用

1 个答案: