Question

我有一个图像网格，当点击它时，它被设计为具有添加更多按钮。新的图像占位符应显示为默认图像，单击它时，相机将被调用，并应使用拍摄的图片更新默认图像。在我的情况下，相机图片没有更新，但默认图片保持不变。当点击添加更多，而不是默认图片时，最近的相机图片正在出现。我认为渲染部分代码存在问题。
这是我的代码

var Summary = React.createClass({
      getInitialState: function(){
        return {
          picTriggers: [],
          number:0,
          image:"https://www.bignerdranch.com/img/blog/2014/07/Button-2.png"
        }
      },


     camera: function(){

        var that = this;
        var image = this.state.image;
          navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
            destinationType: Camera.DestinationType.DATA_URL
          });

          function onSuccess(imageData) {
              console.log(imageData);
              var finalimage = "data:image/jpeg;base64," + imageData;
              that.setState({image: finalimage});
          }


         function onFail(message) {
            alert('Failed because: ' + message);
         }


     },


    newButton: function(){
      var number = this.state.number;
      number = number+1;
      var picTriggers = this.state.picTriggers;
      picTriggers.push(<img id={"div"+number} src={this.state.image} onClick={this.camera} className="addpicture"/>);
      this.setState({picTriggers: picTriggers, number:number});
    },

    render: function(){

        return(
          <div>
            {this.state.picTriggers}
            <button onClick={this.newButton}>
              {this.state.number>0?"Add More":"Add a picture"}
            </button>
            <button className="uploadselected"> Upload Selected </button>
          </div>);

      }

    });

Answer 1

如果我正确地遵循这个，那么这里的流程如下：

首先渲染：呈现Add a picture按钮
如果单击该按钮，则会通过#newButton
如果单击该图像，#camera函数将异步获取图像并使用图像更新状态。
这会触发#render。但是此时您还没有做任何事情来使用新图像向picTriggers添加新项目，因此会显示旧图像。
当您点击Add More时，它会再次运行#newButton并呈现您的图片。

我认为只需维护一个imgSrcs数组而不是一组渲染组件，就可以让你的生活变得更轻松。获得相机图像后，添加到阵列：

var finalImage = "data:image/jpeg;base64," + imageData;
// Better not to mutate state directly, so make a new array
// with slice, dropping the default image
var imgSrcs = this.state.imgSrcs.slice(0, -1);
imgSrcs.push(finalImage);
this.setState({ imgSrcs: imgSrcs });

在#newButton中，您只需将默认图像添加到数组的末尾：

var imgSrcs = this.state.imgSrcs.concat([this.state.defaultImage]);
this.setState({ imgSrcs: imgSrcs });

现在你有一个简单的渲染问题，渲染图像列表而不是硬状态问题，确保每次调用#render时预渲染的组件都是同步的。

最近的相机被默认图像覆盖

1 个答案: