理想情况下，您希望通过某种方式来管理组件中的 loading 和 no-data 状态，具体取决于您的 api 在没有数据时返回的内容 - 您可能必须以不同的方式进行管理，但这也是您应该涵盖的场景。您的数据似乎来自名为 rates 的 prop，而不是 data ，后者是一个具有多个键的对象。

我不确定您的代码结构，但这种迭代和检查加载/无数据状态也可能在父组件中完成。

    class Currency extends React.Component {
    render() {
            const p = this.props;
            const { rates = {} } = p;
            const hasData = Object.keys(rates).length > 0;
            return !p.loading ? (
                <div className="currency">
                    <div className="currencyInfo">
                        { hasData ?
                        <>
                          <div>{"1 "+p.base + " = " }</div>
                          {Object.entries(rates).map(([k, v]) => <div key={k}>{`${k}: ${v}`}</div>)}
                        </> : <p>No data available</p>
                        }
                    </div>
                </div>
            ) : <Loader />
        }
    }

在父组件中，您可以执行以下操作：

    class ParentComp extends React.Component {
      public state = { loading: true, rates: {} };

      componentDidMount() {
        await this.fetchData(...); // could set loading to false on success
      }

      render() {
        const { rates = {} } = this.state;
        const hasData = Object.keys(rates).length > 0;
        return (
          !this.state.loading ?
            hasData ?
              Object.entries(rates).map(([k, v]) => <Currency key={k} name={k} value={v} ... />)
              : <p>No data available</p>
            : <Loader />
        );
      }
    }

然后在您的子组件中：

class Currency extends React.Component {
  render() {
    return  (
      <div className='currency'>
        <div className='currencyInfo'>
            <div>{`${this.props.name}: ${this.props.value}`}</div>
        </div>
      </div>
    );
  }
}

致谢：

感谢 @Codebling 指出在键的

我假设您的货币组件是一个子组件，并且它有一个父组件。

在将“数据”传递给子组件之前，只需为其初始化一个值即可。

const Child = props => {
  return(
    <div>
      Child
      {props.data.country}
    </div>
  )
}

const Parent = props => {

  // initiate state value to your variables that you are using.
  let [data, set_data] = useState(
    // this is where your error reside, you did not initiate a value.
    { country: 'abc'}
  );

  // api call
  useEffect(()=>{
    axios.get('http://ip-api.com/json/24.48.0.1',{})
    .then(function (response) {
        console.log(response.data);
      set_data(response.data)
    })
    .catch(function (error) {
      console.log(error.config);
    });
  }, [])

  return(
    <div>
      Parent
      <Child data={data}></Child>
    </div>
  )
}
export default Parent;