0

这可能是一种反模式，但我正在使用固定数据表来显示具有变化列的表。resize 函数根据状态变化调整每列的宽度。但是，我需要从收到的道具中构建状态或列。我无法从渲染函数更新状态。有没有更好的方法来解决这个问题？到目前为止，我最好的解决方案是将状态宽度生成为 100，但这是暂时的。

constructor(props) {
    super(props);var columnWidths ={
            recordid: 40,

        };
    for(var i=0; i<100;i++) {
        columnWidths[i]=200
    }

    this.state = {
        columnWidths
    }; 
    this._onColumnResizeEndCallback = this._onColumnResizeEndCallback.bind(this);
}
_onColumnResizeEndCallback(newColumnWidth, columnKey) {
    this.setState(({ columnWidths }) => ({
        columnWidths: {
            ...columnWidths,
            [columnKey]: newColumnWidth,
        }
    }));
    console.log(newColumnWidth + " " + columnKey)
}
4

2 回答 2

0

我不确定我是否理解您的问题，但是您可以在构造函数（props）函数中初始化您的状态，然后在 componentWillMount 或 componentDidMount 以及 componentWillReceiveProps(newProps) 中使用基于 this.props 的 setState。

所以看来你需要在生命周期方法componentWillMount或componnentDidMount中调用setState。

于 2017-08-11T11:35:17.360 回答
0

所以显然我可以使用 componentWillUpdate() 从道具更新我的反应状态。componentWillReceiveProps() 不会更新我从 api 调用中提取的道具。但是，我需要在将道具拉入渲染之前更新状态。如果它们已预先填写，则此几乎解决方案有效，但在页面刷新时不会：

componentWillUpdate() {
    var columnWidths = {
        recordid: 40,
    };
    Object.keys(this.props.fields).map(key => {
        columnWidths[this.props.fields[key].Order] = 200;

    })
    this.state = {
        columnWidths
    };

}

我不得不添加|| 或符号以允许它在第一次渲染时，然后在加载道具后自动创建

width={columnWidths[field.Order]||200}
于 2017-03-02T00:53:34.560 回答