Javascript 如何在reactNative中设置axios的res状态

我想从API中读取一个数据数组，并在我的react本机代码中使用axios，但状态首先返回null array，然后返回all index。那个么我如何设置响应的状态呢

构造函数（道具）{
超级（道具）；
此.state={
类别：[]
}
}
加载数据=（）=>{
axios.get（“http://my-fashion.co.il/samerjammal_APIs/api/categories")
。然后（（res）=>{
console.log（'来自api的数据'，res.data.data[0].imageURL）
这是我的国家({
类别：res.data.data
})
})
}
componentDidMount（）{
这是loadData（）；
}

只有URL存在时，才能显示图像：

{ this.state.categories[0].imageURL &&
  <Image source={this.state.categories[0].imageURL}/>
}

构造函数（道具）{
超级（道具）；
此.state={
类别：[]
}
}
加载数据=（）=>{
让那=这；
axios.get（“http://my-fashion.co.il/samerjammal_APIs/api/categories")
。然后（（res）=>{
console.log（'来自api的数据'，res.data.data[0].imageURL）
那是一个州({
类别：res.data.data
})
})
}
componentDidMount（）{
这是loadData（）；
}
图像组件应该是

获取数据后，需要再次渲染。 另外，添加加载指示器和捕获抓取错误的方法也是一个好主意

constructor(props) {
  super(props);
this.state = {
  categories: [], 
  loading: true,
}
}
loadData = () => {
  axios.get("http://my-fashion.co.il/samerjammal_APIs/api/categories")
  .then((res) => {
    console.log('data from api', res.data.data[0].imageURL)
    this.setState({
      categories:res.data.data,
      loading: false,
    })
  })
}

componentDidMount(){
this.loadData();
}

render() {
  const { categories, loading } = this.state;

return (
  <View  style={{
                  maxHeight: deviceHeight / 2,
                  flex: 1,
                  width: null,
                  height : 305
                }} >
  { loading ? <ActivityIndicator style={StyleSheet.absoluteFill} size=“large” /> : (
  <Image
     source={categories[0].imageURL}
                style={{
                  resizeMode: "cover",
                  ...StyleSheet.absoluteFillObject,
                }}
              />
    )
  }
</View> )}

构造函数（道具）{
超级（道具）；
此.state={
类别：[]，
加载：对，
}
}
加载数据=（）=>{
axios.get（“http://my-fashion.co.il/samerjammal_APIs/api/categories")
。然后（（res）=>{
console.log（'来自api的数据'，res.data.data[0].imageURL）
这是我的国家({
类别：res.data.data，
加载：false，
})
})
}
componentDidMount（）{
这是loadData（）；
}
render（）{
const{categories，load}=this.state；
返回(
{加载？：(
)
}
)}

这是@aaron brager解决方案的正确形式：

{ (this.state.categories.length > 0) &&
  <Image source={this.state.categories[0].imageURL}/>
}

{（this.state.categories.length>0）&&
}

或

const source=this.state.categories.length？this.state.categories[0]。imageURL:require（'assets/placeholder.png'）；
返回；

实际上我尝试过，但也不起作用，给我'getHostNode'错误类型错误：无法读取未定义的属性'imageURL'：（关于第二个方法，您的意思是：| | require（'assets/placeholder.png'））@开发者如果您没有在构造函数中设置状态，那么您需要检查

类别是否存在，以及它是否有任何项。关于第二种方法，我的意思是，如果imageURL不存在，您可以包含一个占位符图像来显示。实际上，我尝试了这个“let that=this；”，但它不起作用：（关于'equire（'assets/placeholder.png'）这个'assets/placeholder.png'是什么意思？从我的api？从本地系统或任何地方的一些虚拟图像
constructor(props) {
  super(props);
this.state = {
  categories: [], 
  loading: true,
}
}
loadData = () => {
  axios.get("http://my-fashion.co.il/samerjammal_APIs/api/categories")
  .then((res) => {
    console.log('data from api', res.data.data[0].imageURL)
    this.setState({
      categories:res.data.data,
      loading: false,
    })
  })
}

componentDidMount(){
this.loadData();
}

render() {
  const { categories, loading } = this.state;

return (
  <View  style={{
                  maxHeight: deviceHeight / 2,
                  flex: 1,
                  width: null,
                  height : 305
                }} >
  { loading ? <ActivityIndicator style={StyleSheet.absoluteFill} size=“large” /> : (
  <Image
     source={categories[0].imageURL}
                style={{
                  resizeMode: "cover",
                  ...StyleSheet.absoluteFillObject,
                }}
              />
    )
  }
</View> )}

{ (this.state.categories.length > 0) &&
  <Image source={this.state.categories[0].imageURL}/>
}

const source = this.state.categories.length ? this.state.categories[0].imageURL : require('assets/placeholder.png');
return <Image source={source} />;