在React中，通常不应将从fetch调用返回的数据直接设置为组件的状态。相反，可以在组件的生命周期方法中使用一个临时变量来存储数据，并在需要时将其设置为状态。

以下是一个示例，演示如何将从fetch调用返回的数据设置为组件的状态：

class MyComponent extends React.Component {
  state = {
    data: null,
    isLoading: true
  };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({
          data: data,
          isLoading: false
        });
      })
      .catch(error => {
        console.error('Error:', error);
        this.setState({ isLoading: false });
      });
  }

  render() {
    const { data, isLoading } = this.state;

    if (isLoading) {
      return 
Loading...
;
    }

    return (
      

        {/* 使用数据渲染组件 */}
        {data.map(item => (
          
{item.name}
        ))}
      
    );
  }
}

在上述示例中，我们使用componentDidMount生命周期方法来发起fetch调用，并在成功时将数据设置为组件的状态。同时，我们还设置了一个isLoading状态，以在数据加载期间显示一个加载指示器。

在render方法中，我们根据isLoading状态来决定渲染什么内容。如果数据正在加载中，我们显示一个Loading...文本。一旦数据加载完成，我们使用数据渲染组件。

这种方法可以确保在数据加载期间显示正确的用户界面，以及在数据加载完成后正确地渲染数据。