javascript - 我们可以在react中动态添加状态名称吗

Question

从数据库获取对象，然后我将其转换为数组以更改矩形组件的状态，现在我想将数据更新到我在 react 中创建的 View 。

我遵循的方法如下:

var PreviewContainer = React.createClass({
  getInitialState: function() {
    return {
      sourceImg: {
        src0: 'xyz',
        src1: 'xyz',
        src2: 'xyz',
        src3: 'xyz'
      },
      id: '',
      alter: "myalt"
    };
  },
  render: function() {
    Interfaces.previewContainer = this;
    var imgContainer = [];

    for (var i = 0; i < 4; i++) {
      imgContainer.push(React.createElement(PreviewImgContainer, {
        key: i,
        sourceImg: this.state.sourceImg['src' + i],
        alter: this.state.alter
      }));
    }
    return (
      React.createElement('div', {
          className: 'previewContainer'
        },
        imgContainer,
        React.createElement(ColorCardParent))
    );
  }
});

之后我必须使用静态方法按如下方式在容器中设置这些图像

Interfaces.previewContainer.setState({sourceImg: {
    src0: templatearray[0].image_path.slice(1),
    src1: templatearray[1].image_path.slice(1),
    src2: templatearray[2].image_path.slice(1),
    src3: templatearray[3].image_path.slice(1)
  }
});

有没有办法做到这一点，以便我可以动态地执行此操作。

Answer 1

不太清楚您想要实现的目标以及问题是什么，但您可以按如下方式填充您的 sourceImg 对象:

var sourceImg = {};
for (var i=0; i<templatearray.length; i++) {
  var srcKey = "src" + i.toString();
  sourceImg[srcKey] = templatearray[i].image_path.slice(1);   // fill object dynamically
}
Interfaces.previewContainer.setState({ sourceImg : sourceImg });

顺便说一句:动态填充对象与 react 无关。