如何在父状态更改时重新渲染功能组件答案

【问题标题】：How to re-render functional component on parent state changed如何在父状态更改时重新渲染功能组件
【发布时间】：2021-03-15 09:08:42
【问题描述】：

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

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

我有表格组件，并且我的页面中有一些单选按钮。当我选择特殊单选按钮时，表格内容会更改。这运作良好。如果我设置表格的第 4 页并选择另一个单选按钮，则表格内容长度会更改。（此时我想看表格的第一页）因此，在选择特殊单选按钮时，我将页面设置为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>
     )
}

【问题讨论】：

标签： reactjs react-component react-functional-component

【解决方案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])

【讨论】：

感谢您的回答。我试过但没有工作。 useEffect(()=>console.log(props.current_page), [props.current_page])我放了这行，但是当我选择单选按钮时，我的控制台面板中没有字符。
那是连线的......你在父渲染之后记录了子组件内的任何内容吗？
啊.. 我注意到为什么不醒来useEffect。我用这个useEffect(()=>setPage(props.current_page), [props])，这很好用。无论如何，非常感谢。请更新您的答案。