Question

在这种情况下，我没有使用reducer更新组件的状态更改。我将prop发送给子组件，并且希望每次在父组件上状态更改时都会对其进行更新。

在主组件中，我默认将状态currentPage设置为1；

const [pager, setPager] = useState({
    currentPage: 1
  });

const propToSend = pager.currentPage;

//and make trigger change:
const onClick = (e) => {
 setPager({...pager, currentPage:5});
}
....return...
<Pagination pageProp={propToSend} />

在分页组件中，我获得了状态并将其设置为新状态：

const Pagination = (props) => {
  const currentPage = props.pageProp
  const [pager, setPager] = useState({
    currentPage
  });

 const changeActivePage(num)=> {
   setPager({..pager, currentPage:num});
 }
  .....
 const paginomal = ListPagers.map(num => (
    <li key="num" onClick={changeActivePage(num)}>{num}</li>
 ));
  return(
    <Fragment>
      {paginomal}
    </Fragment>
  )
}

如果您能看到我是否对具有功能的母亲Compoment进行寻呼机

//and make trigger change:
const onClick = (e) => {
 setPager({...pager, currentPage:5});
}

然后在寻呼机上什么也没有发生。

您能告诉我如何触发更改为从母组件更改，因为状态随着“子代”上的点击事件而改变了。

Answer 1

当props的currentPage更新时，您需要更新分页状态。使用效果钩可以实现此目的。 useEffect挂钩会在第一次安装组件时触发一次，然后在其依赖项数组（第二个参数）中的值每次更改时触发一次。在这种情况下，当currentPage的值从1更改为2时。

const Pagination = (props) => {
  const currentPage = props.pageProp;

  const [pager, setPager] = useState({
    currentPage
  });

  useEffect(() => setPager(currentPage), [currentPage]);

  const changeActivePage(num)=> {
    setPager({..pager, currentPage:num});
  }
  .....
  const paginomal = ListPagers.map(num => (
    <li key="num" onClick={changeActivePage(num)}>{num}</li>
  ));
  return(
    <Fragment>
      {paginomal}
    </Fragment>
  )
}

但是现在您有了两个事实的来源！而且很难使它们保持同步，因此存在上述问题。最好将setPager函数从“母亲”传递给孩子作为回调。然后，它将更新存储在父组件中的状态，这是事实的唯一来源。

const Pagination = ({ pageProp, onPageChange }) => {
  const currentPage = pageProp;

  const changeActivePage(num)=> {
    onPageChange({ currentPage: num });
  }
  .....
  const paginomal = ListPagers.map(num => (
    <li key="num" onClick={changeActivePage(num)}>{num}</li>
  ));
  return(
    <Fragment>
      {paginomal}
    </Fragment>
  )
}

然后从母亲那里

const [pager, setPager] = useState({
    currentPage: 1
  });

const propToSend = pager.currentPage;

//and make trigger change:
const onClick = (e) => {
  setPager({...pager, currentPage:5});
}
....return...
<Pagination pageProp={propToSend} onPageChange={setPager} />

Answer 2

如果您不想在子组件中保持单独的状态，则应将onClick方法作为 props 传递给子组件，然后在下面使用类似的方法

const paginomal = ListPagers.map(num => (
    <li key="num" onClick={() => onClick(num)}>{num}</li>
  ));

在您的父组件中，您可以编写类似

的内容

//and make trigger change:
const onClick = (num) => {
 setPager({...pager, currentPage:num});
}
....return...
<Pagination pageProp={propToSend} onClick={onClick}/>

尽管状态已更新，但组件子组件未重新呈现

2 个答案: