无法从我的API将数据解析为reactjs的setState

Question

我向axios发出了API请求，接收了我的数据，然后用

对其进行了解析

dp = JSON.parse(JSON.stringify(response.data.data));，

但是当我想对这些数据调用setState并使用Context API将其提供给我的整个应用程序时，我的状态包含以下内容：

state = {
      data: [],
      isLoading: true
    };

并像这样在我的this.setState中呼叫componenetDidMount()：

this.setState({data: dp});

但是，这将引发以下错误：

  

未捕获的不变变量：对象作为React子对象无效（找到：带有键的对象

PS：我的API调用中有深层嵌套的对象，因此无法在我的状态下定义它们的属性。

更新

 render () {
    return (
      <CoinContext.Provider 
        value={{
          data: this.state.data
        }}>
      </CoinContext.Provider>
    );
  }

dp的

值： result of dp request in console

更新2

context.js：

import React from 'react';

export default React.createContext({
    data: []
})

app.js：

import axios from './axios-coins';
import CPContext from './context/context.js'


class App extends Component {

    state = {
      data: [],
      isLoading: true
    };

componentDidMount() {
      this.fetchData();
}

fetchData() {
  axios
    .get("")
    .then(response => {
      data1 = JSON.parse(JSON.stringify(response.data.data));
      console.log(data1);
      this.setState({data: data1});
    })
    .catch(error => this.setState({ error, isLoading: false }));
}

render () {
    return (
      <CoinContext.Provider 
        value={{
          data: this.state.data
        }}>
      </CoinContext.Provider>
    );
  }
}

export default App;