Question

这可能是反模式，但我使用fixed-data-table来显示更改列的表。 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)
}

Answer 1

显然我可以使用componentWillUpdate（）来更新我的反应状态。 thecomponentWillReceiveProps（）不会更新从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}

Answer 2

我不确定我理解你的问题，但是你可以在构造函数（props）函数中初始化你的状态，然后在componentWillMount或componentDidMount中使用set.pros的setState，也可以在componentWillReceiveProps（newProps）中使用。 p>

所以你似乎需要在lifecylce方法componentWillMount或componnentDidMount中调用setState。

从非静态列反应resize fixed-data-table

2 个答案: