Reactjs 在不定义（知道）AJAX数据的数据结构的情况下，基于父组件AJAX调用更新子组件的React状态

我不确定我是否了解共享数据的父/子组件的数据结构的规范或首选架构方式

?？？为什么我必须在初始状态下声明来自AJAX调用的数据结构，而不仅仅依赖于返回的数据本身

最初的问题-我正在尝试对通过Ajax传入的字符串进行子串/切片，但如果未加载该字符串，它将错误为未定义，因此我尝试只在它传入后应用它

工作示例：

如果我没有将原始状态（

state.name

声明为index.js中的

'

），我将获得

无法读取未定义的属性“slice”，因为数据尚未加载

Index.js：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Parent from './Parent';
import './style.css';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      // Why does this have to be declared before it comes in through ajax
      name: '', 
      // list: []
      // otherAttrs: {}
    };
    this.bind()
  }

  updateList(args) {
    // Update state with harcoded list of items
    axios.get('https://reqres.in/api/unknown')
    .then(res => {
      const axData = res.data;
      this.setState({ 'data': axData.data });
      this.setState({ 'name': axData.data[4].name });
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
      // always executed
    })  
  }

  bind() {
    this.updateList = this.updateList.bind(this)
  }

  render() {
    return (
      <div>
        <button onClick={this.updateList}>Click to complete AJAX Call</button>
        <Parent data={this.state.data} name={this.state.name}/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

export default App

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Parent”导入父项；
导入“/style.css”；
从“axios”导入axios；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
//为什么在它通过ajax进入之前必须声明它
名称：“”，
//名单：[]
//其他属性：{}
};
this.bind（）
}
更新列表（args）{
//使用项目的已编码列表更新状态
axios.get（）https://reqres.in/api/unknown')
。然后（res=>{
const axData=res.data；
this.setState（{'data'：axData.data}）；
this.setState（{'name'：axData.data[4].name}）；
})
.catch（函数（错误）{
console.log（错误）；
})
.然后（函数（）{
//总是执行
})  
}
绑定（）{
this.updateList=this.updateList.bind（this）
}
render（）{
返回(
单击以完成AJAX调用
);
}
}
render（，document.getElementById（'root'））；
导出默认应用程序

Parent.js：

import React, { Component } from 'react';
import Childd from './Childd';

class Parent extends React.Component {
  constructor(props){
    super(props);
  }

  // Render parent component, pass items list and str 
  // into Childd's props
  render () {
    return (
      <div>
        Parent... <br/><br/>
        <Childd data={this.props.data} name={this.props.name}/>
      </div>
    )
  }
}

export default Parent

import React，{Component}来自'React'；
从“/Childd”导入Childd；
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
}
//呈现父组件、传递项列表和str
//变成奇尔德的道具
渲染（）{
返回(
家长…


)
}
}
导出默认父级

Childd.js：

import React, { Component } from 'react';

class Childd extends React.Component {
  // Redundant, but just putting this here
  constructor(props) {
    super(props);
  }

  // Render Childd using this.props.str
  // React will handle the component's re-rendering
  // when state of Parent changes
  render () {
    //Tige
    return (
      <div>Childd... <br/>
        dataObj = … 
        <br/>
        Name attr: {this.props.name.slice(0,4).toUpperCase()}
        </div>     )
    }
}

export default Childd

import React，{Component}来自'React'；
类child扩展了React.Component{
//多余的，但是把这个放在这里
建造师（道具）{
超级（道具）；
}
//使用this.props.str呈现child
//React将处理组件的重新渲染
//当父级的状态更改时
渲染（）{
//泰格
返回(
Childd…

dataObj=…


Name attr:{this.props.Name.slice（0,4.toUpperCase（）}
)
}
}
导出默认child
Ajax请求需要时间来完成，并且是异步进行的。在响应本身作出反应之前，应该呈现组件。如果名称未定义，在初始渲染中它将抛出未定义的错误。是的，但是为什么我不能只使用
componentDidMount
，或者其他方法，因为
componentWill*
正在被弃用，这让我相信这些不是正确的方法。或者，为什么React没有用于加载数据的内置JS函数/或者类似Ajax的助手函数，再次让我相信我缺少了一些高级功能