從非靜態列反應調整固定數據表的大小

Question

這可能是一種反模式，但是我正在使用固定數據表來顯示具有更改列的表。 調整大小功能根據狀態變化調整每列的寬度。 但是，我需要根據收到的道具來構建狀態或列。 我無法從render函數更新狀態。 有沒有更好的方法來解決這個問題？ 到目前為止，我最好的解決方案是將狀態寬度生成為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)
}

Answer 1

因此，顯然我可以使用componentWillUpdate（）從道具更新我的反應狀態。 componentWillReceiveProps（）不會更新從api調用中提取的道具。 但是，我需要在將道具拉入渲染器之前更新狀態。 如果預先填寫了此Almost Solution，則可以使用，但刷新頁面后將無效：

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}

Answer 2

我不確定我是否理解您的問題，但是您可以在構造函數（props）中初始化狀態，然后在componentWillMount或componentDidMount以及componentWillReceiveProps（newProps）中基於this.props使用setState。

因此，似乎您需要在生命周期方法componentWillMount或componnentDidMount中調用setState。