Question

我使用 redux action 在点击 Good btn 时删除表格的第一行

LineMange.js的Reducer

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;
  }
};

Panel.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() 但另一个页面计算数据的长度减速器中的功能很好，所以如果我做错了什么，请告诉我，我对 react-redux 真的很陌生

Answer 1

您已在 this.props.data 上将 state.data 分配给 constructor。 state.data 更改后，this.props.data 不会更改。

所以你应该直接在 render() 中使用 props 数据来立即反映商店的变化。

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

更新

尝试为 RemP 更改您的减速器，如下所示。

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

Answer 2

您可以使用 this.props.data 代替 this.state.data。

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

或者您可以使用静态 getDerivedStateFromProps(props, state) 反应生命周期。

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

想要在 redux 中的状态改变时重新渲染表行

2 个答案: