Question

我想从API中读取数据数组，并且在我的反应本机代码中使用axios，但是状态首先返回null数组然后返回所有索引。那么如何设置响应状态？

constructor(props) {
  super(props);
this.state = {
  categories: []
}
}
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
    })
  })
}

componentDidMount(){
this.loadData();
}

这个组件：

  <Image
                source={this.state.categories[0].imageURL}
                style={{
                  resizeMode: "cover",
                  maxHeight: deviceHeight / 2,
                  flex: 1,
                  width: null,
                  height : 305
                }}
              />

任何帮助，拜托？我尝试使用自我，也没有工作:(

Answer 1

如果存在网址，您只能显示图片：

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

或者您可以在render()方法的顶部检查您是否有网址并将其放入占位符来源：

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

Answer 2

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

componentDidMount(){
  this.loadData();
}



    and image component should be

  <Image
            source={this.state.categories[0].imageURL || require('assets/placeholder.png')}
            style={{
              resizeMode: "cover",
              maxHeight: deviceHeight / 2,
              flex: 1,
              width: null,
              height : 305
            }}
          />

Answer 3

获取数据后，您需要再次渲染。另外，最好添加一个加载指示器和一种捕获错误的方法。

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> )}

Answer 4

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

{ (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} />;

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

4 个答案: