reactjs - 当父状态更新时，React 钩子会更新子状态

Question

我在与 setState 一起传递的父组件中有钩子，当我通过子更新父组件时，它应该重新渲染两者，但它没有。

    // Parent
    const [chosenArticles, setChosenArticles] = React.useState<number[]>([])
    ...
    <ChooseArticles
      setChosenArticles={setChosenArticles}
      chosenArticles={chosenArticles}
     />
    // Child
    export default (props: Props) => {
  const { item, setChosenArticles, chosenArticles } = props
  const checkItem = (articleId: number, check: boolean) => {
    let newArr: number[] = props.chosenArticles
    if (!check) {
      newArr.push(articleId)
    } else {
      newArr = newArr.filter(item => item !== articleId)
    }
    setChosenArticles([...newArr])
  }
  return (
    <ChildComp>
      <ChildTopText>Choose Articles</ChildTopText>
      <ChildInner>
        {item.sub.map((sub: any, i: number) => {
          return (
            <Sub key={i}>
              <ArticleGroup>{sub.name}</ArticleGroup>
              {sub.cats.map((cat: any, i: number) => {
                const isChecked =
                  chosenArticles.filter(c => c === cat.id).length > 0
                    ? true
                    : false
                return (
                  <SubItem key={cat.id}>
                    <CheckBox
                      onPress={() => checkItem(cat.id, isChecked)}
                      checked={isChecked}
                    />
                    <SubName>{cat.name}</SubName>
                  </SubItem>
                )
              })}
            </Sub>
          )
        })}
      </ChildInner>
    </ChildComp>
  )
}

这不应该工作吗？当我再次手动安装子组件时，它会更新为正确的值。

我稍后使用状态值来勾选子组件中的复选框。

标签： reactjsreact-hooks