Question

export class EstimateForm extends React.Component<IEstimateFormProps, 
IEstimateFormState> {
state: IEstimateFormState = {
cellUpdateCss: 'red',
toRow: null,
fromRow: null,
estimateList: null,
estimateItemList: [],
poseList: null,
levelList: null,
partList: null,
selectedEstimate: null,
totalEstimateItems: 0,
selectedIndexes: [],
totalEstimateAmount: 0,
grid: null,
projectId: 0,
};


constructor(props, context) {
super(props, context);
this.state.estimateList = this.props.estimateList;
}  


rowGetter = i => {
const row = this.state.estimateItemList[i];
const selectRevison = this.state.selectedEstimate.revision;
if (row['pose.poseName']) {
const poseCode = 
row['pose.poseName'].substring(row['pose.poseName'].lastIndexOf('[') + 1, 
row['pose.poseName'].lastIndexOf(']'));
for (const pose of this.state.poseList) {
if (pose.poseCode === poseCode) {
  row.pose = pose;
}
}
}

if (row['level.levelName']) {
const levelCode = row['level.levelName'].substring(
row['level.levelName'].lastIndexOf('[') + 1,
row['level.levelName'].lastIndexOf(']')
);
for (const level of this.state.levelList) {
  if (level.levelCode === levelCode) {
  row.level = level;
}
}
}

 if (row['level.part.partName']) {
 const partCode = row['level.part.partName'].substring(
 row['level.part.partName'].lastIndexOf('[') + 1,
 row['level.part.partName'].lastIndexOf(']')
 );
for (const part of this.state.partList) {
if (part.partCode === partCode) {
  row.part = part;
  }
 }
}

row.get = key => eval('row.' + key);
row.totalCost = (row.materialCost + row.laborCost) * row.amount;
const changeColor = {
  backgroundcolor: 'red'
  };
const all = document.getElementsByClassName('react-grid-Row') as 
HTMLCollectionOf<HTMLElement>;
debugger; if (row.revision > selectRevison) {
 for (let i = this.state.fromRow; i <= this.state.toRow; i++) {
      all[i].style.color = 'red';   //HERE
}
return row;
}
}

handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
const rows = this.state.estimateItemList.slice();

for (let i = fromRow; i <= toRow; i++) {
const rowToUpdate = rows[i];
const updatedRow = update(rowToUpdate, { $merge: updated });
rows[i] = updatedRow;
}

this.setState({ estimateItemList: rows, fromRow: (fromRow), toRow: (toRow) 
}, () => {
});

};

saveEstimateItems = () => {
if (this.state.selectedEstimate == null) {
toast.warn(<Translate 
contentKey="bpmApp.estimateForm.pleaseSelectEstimate">Please select an 
estimate</Translate>);
return;
}



render() {

return ()
}

当条件row.revision> this.state.selectedEstimate.revision时，我想更改行颜色。如何防止this.color更改。但是TypeError：无法读取未定义的属性'style'的get错误，但行颜色不变。我该如何解决这个问题，这是我的第一个反应项目，我不知道问题出在哪里谢谢您的反馈。

Answer 1

好的，因此，由于没有其余的上下文，因为您的粘贴代码难以阅读和理解，因此出现此问题的最简单原因是在此代码段中：

const all = document.getElementsByClassName('react-grid-Row') as 
HTMLCollectionOf<HTMLElement>;
debugger; if (row.revision > selectRevison) {
 for (let i = this.state.fromRow; i <= this.state.toRow; i++) {
      all[i].style.color = 'red';   //HERE
}

本质上，这里可能有很多错误，但是很可能页面上没有该类的行，或者少于您的this.state.fromRow的行，我看到您那里有调试器，但是您缺少一些东西：

您没有对all进行空检查以确保您找到了什么
您不是要检查all.length > this.state.fromRow
如果all.length < this.state.toRow

失败是因为all[i]不存在，或者没有值：

all = [0, 1]

例如，您正在寻找全部[3]

抛出这些后备并检查页面加载中的all是什么，您应该能够弄清楚它。

TypeError：无法读取未定义的属性“样式”

1 个答案: