Question

我有两个组成部分，一个叫做homeScreen，第二个是卡片，我确实在homeScreen中获取数据，在我通过道具向卡片组件发送状态之后，将其设置为state。现在，我的卡组件应根据我发送给它的数据生成9张卡，因此我进行了映射，并且出现此错误 TypeError：无法读取未定义的属性“ 0”。

我尝试在Card组件内进行console.log道具，我可以看到数据，但是由于某些原因，地图无法正常工作

Card.js

const Card = props => {
  Array.from({length: 9}).map((i, index) => {

console.log(props);
  return (
    <View style={{flex: 1}}>
      <Text style={{flex: 1, backgroundColor: 'red'}}>
        {props.title[1] ? `${props.title[index]}` : 'Loading'}
      </Text>
      <Text style={{flex: 1, backgroundColor: 'blue'}}>{props.rating[index]}</Text>
    </View>
  );
});
};
export default Card;

homeScreen.js

export default class HomeScreen extends React.Component {
  state = {
    title: [],
    image: [],
    rating: [],
    isLoading: true,
  };

  componentDidMount() {
    this.getData();
  }
  titleSend = () => {
    if (!this.state.isLoading) {
      {
        Array.from({length: 9}).map((i, index) => {
          return this.state.title[index];
        });
      }
    }
  };
  imageSetter = () => {
    Array.from({length: 9}).map((i, keys) => {
      return (
        <Image
          key={keys}
          style={{width: 50, height: 50, flex: 1}}
          source={{uri: this.state.image[keys]}}
        />
      );
    });
  };

  getData = () => {
    const requestUrls = Array.from({length: 9}).map(
      (_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`,
    );

    const handleResponse = data => {
      const shows = data.map(show => show.data);
      this.setState({
        isLoading: false,
        title: shows.map(show => show.name),
        image: shows.map(show => show.image.medium),
        rating: shows.map(show => show.rating.average),
      });
      // console.log(this.state);
    };
    const handleError = error => {
      this.setState({
        isLoading: false,
      });
    };

    Promise.all(requestUrls.map(url => axios.get(url)))
      .then(handleResponse)
      .catch(handleError);
  };

  render() {
    const {isLoading, title, image, rating} = this.state;
    if (isLoading) {
      return <ActivityIndicator size="large" color="#0000ff" />;
    }
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <ScrollView style={{flex: 1, backgroundColor: 'red'}}>
          <Card title={this.state.title} />
        </ScrollView>
        <Text>here images</Text>
      </View>
    );
  }
}

Answer 1

使用Array.from的函数/方法均未返回值。

例如，您的Card组件：

const Card = props => {
  // note addition of `return` statement
  return Array.from({length: 9}).map((i, index) => {

console.log(props);
  return (
    <View style={{flex: 1}}>
      <Text style={{flex: 1, backgroundColor: 'red'}}>
        {props.title[1] ? `${props.title[index]}` : 'Loading'}
      </Text>
      <Text style={{flex: 1, backgroundColor: 'blue'}}>{props.rating[index]}</Text>
    </View>
  );
});
};
export default Card;

titleSend和imageSetter方法也有类似的问题。

索引错误是因为您没有将rating道具传递给Card组件，而是要访问props.rating[0]，props.rating[1]等。

return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <ScrollView style={{flex: 1, backgroundColor: 'red'}}>
          // missing `rating` prop
          <Card title={this.state.title} />
        </ScrollView>
        <Text>here images</Text>
      </View>
    );

使用.map react native映射发送的道具

1 个答案: