Question

class UserExperience extends Component<
  UserExperienceProps,
  UserExperienceState
> {
  state: UserExperienceState = {
    Experience: 0,
  };

  constructor(props: UserExperienceProps) {
    super(props);
    this.state = {
      Experience: 0,
    };
  }

  componentDidMount() {
    fetch(`apiProfile?name=${this.props.name}&auth=${this.props.auth}`)
      .then(response => response.json())
      .then(response => {
        if (response[0] !== undefined) this.setState({ Experience: response[0].Experience });
      });
  }

  render() {
    const { Experience } = this.state;

    return (
      <div>
        <FontAwesomeIcon icon={faCircle} className="text-yellow-400 mr-1" />
        {Experience} <span className="font-semibold">EXP</span>
      </div>
    );
  }
}

因此，我尝试获取this.props，以便可以为我的API调用fetch。但是this.props.name和this.props.auth的返回值未定义。

但是，如果我在console.log(this.props.name)中进行console.log(this.props.auth)和render()的话，它将显示出来，但据我所知，您不能简单地在render（）内部执行fetch，因为不是其预期的设计。

当我进行搜索时，我知道有人提到bind在使用该方法，但是我想我对应该做的事情不太熟悉。而且发现的许多其他解决方案都在利用UNSAFE_componentWillReceiveProps，显然现在正朝着弃用的方向发展。

Answer 1

好的，这里的问题是因为在挂载时，由于是异步调用，因此尚未检索到userData。一旦获取，就会收到预期的props值，但是didMount不会再次运行。您应该为此使用componentDidUpdate。您还需要使用一些验证条件来验证prevProps是否与this.props不同，否则您将面临无限循环。

  componentDidUpdate(prevProps) {
    if(prevProps.name === this.props.name) return
    fetch(`apiProfile?name=${this.props.name}&auth=${this.props.auth}`)
      .then(response => response.json())
      .then(response => {
        if (response[0] !== undefined) this.setState({ Experience: response[0].Experience });
      });
  }

另一种方法是在父级验证name（和/或auth）的存在，以便呈现UserExperience（如果仅在获取其值时才呈现该组件），例如：

{ userData.name && <UserExperience name={userData.userName} auth={userData.userAuthId} /> }

以这种方式安装将正确执行，因为UserExperience仅在值可供您使用时才会呈现。

通过componentDidMount（）或其他方式获取this.props

1 个答案: