TypeError：无法读取未定义的属性'0'-Gatsby

Question

你好，我是Gatsby的newby，当我在return函数中使用它时会抛出错误，并且可以在axios then方法上打印。

class App extends Component {

  state = {
    persona_data: []
  }

  componentDidMount() {

    const URL_PATH = globalHistory.location
    const persona_id = 1;

    axios.get(API_URL+'v1/personas/persona/byId/'+persona_id)
      .then(res => {
        const persona_data = res.data[0];
        this.setState({persona_data});
        console.log('this.state>>');
        console.log(this.state.persona_data.title[0].value); //works and print name
        console.log(this.state.persona_data.title); //works
        console.log(typeof this.state.persona_data.title); //works

      }).catch(error => {
          console.log(error.response)
      });
  }

    render() {
        return (
            <>
                <Layout>
                    {/* <h2>Name-Persona -- {typeof this.state.persona_data.title}</h2> */}  //showing object
                    {/* <h2>Name-Persona -- {typeof this.state.persona_data.title[0].value}</h2> */}  //TypeError: Cannot read property '0' of undefined - gatsby
                    ......