想要在redux中的状态更改时重新呈现表行

Question

I在单击Good btn 时使用redux操作删除表的第一行

LineMange.js减速机

const LineManage = (state = Initstate, action) => {
switch (action.type) {
case 'AddP':
console.log(state.Products);
return {};
case 'RemP':
state.data.splice(0, 1);
console.log(state.data);
return Object.assign({}, state, {
data: state.data
});
default:
console.log(state.data);
return state;
}
};

Pannel.jsx

class Pannel extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
Img:
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/No_image_3x4.svg/1200px-No_image_3x4.svg.png', // default Value
Sheet: {
in_or: 0,
Hr_plan: 0,
Inactual: 0,
NG: 0,
DIFF: 0,
T_plan: 0,
T_Actual: 0,
T_DIFF: 0,
OEEE: 0,
OA: 0,
NG_T: 0,
BAL: 0
} // default value
};
const { RemP } = this.props;
this.RemP = RemP.bind(this);
this.handleScanner = this.handleScanner.bind(this);
this.codevalue = '';
}
componentDidMount() {
document.addEventListener('keypress', this.handleScanner);
}
shouldComponentUpdate(nextProps) {
console.warn('update ' + nextProps);
return true;
}
handleScanner(e) {
if (e.keyCode === 13) {
alert(this.codevalue);
} else {
this.codevalue += e.key;
}
}
render() {
console.warn('render');
return (
<>
<Container fluid="true">
<Row>
<Col>
<Psheet />
</Col>
</Row>
<Row style={{ marginTop: '15px' }}>
<Col lg={6} md={6}>
<div className="frame">
<Container>
<h2 className="Header">Sheet</h2>
<div className="TableControl">
<Table striped bordered hover>
<thead>
<th className="text-center p-0">Kaban No.</th>
<th className="text-center p-0">Part No.</th>
<th className="text-center p-0">Part Name</th>
<th className="text-center p-0">Qty's per Kaban</th>
<th className="text-center p-0">Status</th>
</thead>
<tbody>
{this.state.data.map((data, index) => {
const { Name, Unit, Status } = data.info;
return (
<tr value={data.ID}>
<td>{index + 1}</td>
<td>{data.ID}</td>
<td>{Name}</td>
<td>{Unit}</td>
<td>{Status}</td>
</tr>
);
})}
</tbody>
</Table>
</div>
<hr />
<Row>
<Col>
<Button
onClick={this.RemP}
style={{ marginRight: ' 20px' }}
variant="success"
size="lg"
>
Good
</Button>
</Col>
<Col>
<Button
style={{ marginRight: ' 20px' }}
variant="danger"
size="lg"
>
No Good
</Button>
</Col>
</Row>
<hr />
</Container>
</div>
</Col>
<Col style={{ marginTop: '20px' }} lg={6} md={6}>
<div className="frame">
<Qp imgsr={this.state.data[0].info.Img_src} />
</div>
</Col>
</Row>
</Container>
</>
);
}
}
const mapDispatchToProps = dispatch => {
return {
RemP: () => dispatch(RemP())
};
};
const mapStateToProps = function (state) {
return {
data: state.LineManage.data
};
};
const Pan = connect(mapStateToProps, mapDispatchToProps)(Pannel);
export default Pan;

redux中的状态发生了变化，但组件没有重新渲染，甚至没有触发shouldcomponentupdate((，即使我试图将道具直接传递给render((，但计算reducer中数据长度的另一个页面的功能也很好，所以如果我做错了什么，请告诉我，我真的是新反应redux

Answer 1

您已在constructor上将this.props.data分配给state.data。this.props.data发生变化时，state.data不会发生变化。

因此，您应该直接在render()中使用props数据来立即反映存储更改。

this.props.data.map((data,index) => {
// ...
})

更新

试着把你的减速器换成RemP，如下所示。

case 'RemP':
return {
...state,
data: state.data.slice(1, state.data.length)
}

Answer 2

1. 您可以使用this.props.data而不是this.state.data

<tbody>
{this.props.data.map((data,index) => {
//...
})}
</tbody>

2. 或者您可以使用静态getDerivedStateFromProps(props，state(react生命周期

static getDerivedStateFromProps(props, state) {
this.state.data = props.data;
}