解决方案

Question

我正在尝试围绕 API 调用编写一个包装组件，以便在 api 尚未更新时呈现“加载”。我对反应很陌生，但我似乎无法弄清楚为什么状态没有被传递给 ApiResp 组件：

这里是状态变化的console.log..... 为什么console.log中最后的apiResp没有定义？

App.js

class App extends React.Component {

  async componentDidMount() {
    let xx = await axios.get(apiUrl)
    console.log(`componentDidMount`, xx)
    this.setState({ loading: false, body: xx });
  }

  render() {
    console.log(`rendering ComponentLoading`, this.state)
    const DisplayComponent = ComponentLoading(ApiResp)
    return (
      <div className="App">
        <header className="App-header">
          <img src={face} /*className="App-logo"*/ alt="face-img" />
        </header>
        <br></br>
        <div>
          <DisplayComponent isLoading={AppState.loading} body={AppState.body} />
        </div>
      </div>
    );
  }
}
export default App;

组件加载：

import React from 'react';

function ComponentLoading(Component) {
    return function WihLoadingComponent({ isLoading, ...props }) {
        if (!isLoading) return <Component {...props} />;
        return (
            <p style={{ textAlign: 'center', fontSize: '30px' }}>
                Loading
            </p>
        );
    };
}
export default ComponentLoading;

apiResp.js

import React from 'react';
const ApiResp = (data) => {
    console.log(`apiResp:`, data)
    if (!data || data.statusCode !== 200) {
        return <p>Err: {JSON.stringify(data)}</p>;
    }
    else
        return (
            <div>
                <h3>obj:</h3>
                {JSON.stringify(data)}
            </div>
        );
};
export default ApiResp;

Answer 1

ComponentLoading 是一个高阶组件。 const DisplayComponent = ComponentLoading(ApiResp) 正在装饰 ApiResp 组件：

const ApiResp = (data) => {
    console.log(`apiResp:`, data)
    if (!data || data.statusCode !== 200) {
        return <p>Err: {JSON.stringify(data)}</p>;
    }
    else
        return (
            <div>
                <h3>obj:</h3>
                {JSON.stringify(data)}
            </div>
        );
};

并返回您调用 DisplayComponent 的组件。

作为一个组件，ApiResp 正在使用一个名为 data 的 props 对象并且只访问一个 statusCode 属性。

DisplayComponent 被传递了两个道具：

<DisplayComponent isLoading={AppState.loading} body={AppState.body} />

AppState 未在父组件中定义，但似乎 this.state 具有您想要传递给 DisplayComponent 的值。

解决方案

访问并将正确的对象传递给 props。

<DisplayComponent
  isLoading={this.state.loading}
  body={this.state.body}
/>

我建议还移动渲染方法的 const DisplayComponent = ComponentLoading(ApiResp) 声明out，也移到 App 组件之外。

const DisplayComponent = ComponentLoading(ApiResp);

class App extends React.Component {
  state = {
    loading: true,
    body: null,
  };

  async componentDidMount() {
    let xx = await axios.get(apiUrl)
    console.log(`componentDidMount`, xx)
    this.setState({ loading: false, body: xx });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={face} /*className="App-logo"*/ alt="face-img" />
        </header>
        <br></br>
        <div>
          <DisplayComponent
            isLoading={this.state.loading}
            body={this.state.body}
          />
        </div>
      </div>
    );
  }
}

将组件的结果传递给渲染会返回未定义？

1 个答案:

解决方案