如何在父状态上重新渲染功能组件已更改

Question

我想在父状态改变时重新渲染功能性子组件。当我小时候使用 class 组件时，我就知道如何解决它。在这种情况下，我可以使用 componentWillReceiveProps.

但是我的子组件是功能组件。

我有 table 组件，我的页面中有一些单选按钮。当我选择特殊单选按钮时，table 内容被更改。这运作良好。如果我设置 table 的第 4 页并选择另一个单选按钮，则 table 内容长度会更改。（此时我想看第一页table）因此，选择特殊的广播按钮时，我将页面设置为0。（在父组件中）但是此时子组件不会重新渲染。我该怎么做？

这是我的代码。

父方

export default class Report extends Component {
  constructor() {
    super();
    this.state = {
        table_data:[],
        page: 0,
        analys_type: "1"
    }
  }
  setData = () => {
    ......
    ......
  }

  handleChangeAnalysType = (event) => {
      this.setState({
          analys_type: event.target.value,
          page: 0
      }, () => {
          this.setData();
      });
  }
  render() {
       <div>
           <Paper className="input-box">
                <div>
                     <FormControl component="fieldset">
                          <RadioGroup name="analys_type" value={this.state.analys_type} onChange={this.handleChangeAnalysType}>
                               <FormControlLabel value="1" control={<Radio />} label="Day" />
                               <FormControlLabel value="2" control={<Radio />} label="Week" />
                               <FormControlLabel value="3" control={<Radio />} label="Month" />
                          </RadioGroup>
                      </FormControl>
                  </div>
             </Paper>
             <Paper className="table-box">
                  <AnalysTable table_data={this.state.table_data} analys_type={this.state.analys_type} current_page={this.state.page} />
             </Paper>
       </div>
  }
}

子组件

export default function AnalysTable(props) { 
     const [page, setPage] = React.useState(props.current_page);
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
     const handleChangePage = (event, newPage) => {
         setPage(newPage);
     };

     const handleChangeRowsPerPage = (event) => {
           setRowsPerPage(parseInt(event.target.value, 10));
          setPage(0);
     };

     render (
         <div>
              <TableContainer>
               ......
              </TableContainer>
              <TablePagination
                    rowsPerPageOptions={[10, 25, 100]}
                    component="div"
                    count={props.table_data.length}
                    page={page}
                    onChangePage={handleChangePage}
                    rowsPerPage={rowsPerPage}
                    onChangeRowsPerPage={handleChangeRowsPerPage}
                    labelRowsPerPage="rows"
               />
         </div>
     )
}

Answer 1

您需要在父更改时更改组件状态，因此：

//here you initialize the page state 
const [page, setPage] = React.useState(props.current_page);

//add and effect on current_page change
useEffect(()=>setPage(props.current_page), [props.current_page])

如何在父状态上重新渲染功能组件已更改

How to re-render functional component on parent state changed

reactjs

react-component

react-functional-component