Question

我有一个图片网址数组，我正在尝试创建一个新的对象，该对象应如下所示： source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' }

所以我用reduce（）做到了。现在，我想要修改后的imageArray并为其分配状态变量，称为images（必须是数组），但是我却收到未定义引用错误imageArray的原因？

我想将新创建的imageArray分配给状态变量，该怎么办？目前，我收到参考错误，应该将reduce()操作移到类组件之外。

代码：

export default class ImageView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      images: imageArray
    };
  }
  render() {
    const imageArray = this.props.images.reduce((acc, images) => {
      let temp = {
        source: {
          uri: images
        }
      };

      acc.push(temp);
      return acc;
    }, []);
    console.log(imageArray);
    return <View style={{ flex: 1 }} />;
  }
}

Answer 1

您正在您的render方法中定义imageArray，这超出了constructor的范围。建议您在定义图像数组之后调用this.setState({ images: imageArray });，这应该不会在render方法内部发生。将state.images初始化为一个空数组。在componentDidMount中，减少this.props.images，然后呼叫setState。

Answer 2

尝试一下：

export default class ImageView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      images: []
    };
  }
  componentDidMount() {
    const imageArray = this.props.images.reduce((acc, images) => {
      let temp = {
        source: {
          uri: images
        }
      };

      acc.push(temp);
      return acc;
    }, []);

    this.setState({ images: imageArray });
  }
  render() {
    return <View style={{ flex: 1 }} />;
  }
}

从现有对象数组创建新对象数组时出现引用错误？

2 个答案: