Question

我看过很多关于this.props的帖子，但是似乎没有一个回答我的问题，或者至少我找不到它。

我的组件使用this.props作为参数来获取我的网址

以下代码几乎是https://reactjs.org/docs/faq-ajax.html的精确副本

import React, { Component } from 'react';

class MyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    let entityKey = this.props.eKey;
    fetch(`some/url/${this.props.eKey}`)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading My List...</div>;
    } else {
      if (!items) {
        return <div>Failed to Load My List</div>;
      } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item}>
              {item}
            </li>
            ))}
        </ul>
      );
      }
    }
  }
}



export default MyList

现在我的脚本叫做

class MyFunc extends Component {
  return (
    <div>
      <MyList
        eKey={this.props.eKey}
      />
    </dev>
  );
}

为简单起见，我在MyFunc中删除了其他代码

当我console.log内的this.props MyList时，它返回{eKey: ""}，因此我知道eKey正在传入。但是，当您可以看到，它是空的。

我不知道是否是因为我在componentDidMount周期有这个，由于某种原因this.props在fetch到达时还没有到达。如果是这样，在执行该行之前如何保证到达？

如果在我遇到其他问题的地方，出了什么问题？

编辑：

添加更多信息。这与减速器有关。 redux并不是我的强项。....所以请纠正我在任何错误概念上的想法。

减速器使用initialState和action。动作可以是不同的事情。 eKey的唯一加载位置是action.type='load'

export function reducer(state = initialState, action) {
    switch (action.type) {
    case LOAD:
        return {
          ...state,
          eKey: action.data.eKey,
          // and some other stuff
        };

    // some other cases here

    default:
        return state;
    }
}

有趣的是，有一个提交按钮可以更新另一个组件，该组件应该获得一个新的eKey并获取eKey的数据。那时，总是会填充eKey，但是不会相应地更新我的myList。我认为这是我必须要解决的另一个问题，但是如果有某种联系，我想在这里提出。

似乎不只调用reducer，而是仅挂载了组件，而已经调用了componentDidMount。最终调用reducer时，MyList不会更新。我不确定如何解决这个问题

编辑2：

我尝试将componentDidMount中的内容移动到render函数中（当然有一些mod）。它行得通吗？当然可以，但是当我console.log进行打印时，它只会继续打印出东西。似乎此渲染功能正在不断接收更新。我不确定这是否正常，因为我的reactjs知识不足以回答这个问题。它有效，但是我想知道这是否是正确的处理方式

Answer 1

我通过调用另一个函数解决了我的问题，所以我的代码看起来像

class MyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    this.props.loadMystuff().then(() => {
      if (this.state.eKey !== this.props.eKey) {
        let eKey = this.props.eKey;
        this.fetchSList(eKey);
      }
    }).catch((error) => toast(error.message));
  }

  fetchSList(eKey) {
    if (eKey !== '') {
      fetch(`some_api_url_config/${this.props.entityKey}`)
            .then(res => res.json())
            .then(
              (result) => {
                this.setState({
                  isLoaded: true,
                  items: result
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          );
    }
  }

  render() {
    const { error, isLoaded, items } = this.state;

    if (items) {
      return (
        <div>
          <h3>S List</h3>
          <ul>
            {items.map(item => (
              <li key={item}>
                {item}
              </li>
              ))}
          </ul>
        </div>
      );
    } else if (error) {
      return <div>Error: List Missing...{error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading List...</div>;
    } else {
        return <div>Not Found</div>;
    }
  }
}

请注意，loadMyStuff是检索eKey的那个，因此调用它将有效地使我获得eKey来解决计时问题

reactjs-component.ids中的this.props为空

1 个答案: