反应组件状态不更新传递的道具

Question

我创建了一个 Accordion 组件，它具有数据（对象）和扩展（布尔值）作为道具。 expanded props 用于设置作为 prop 传递的组件的 expanded/collapsed 状态。

const DeltaAccordion = ({ index, data, expanded = true }) => {

Accordion 组件也有一个内部状态

const [isExpanded, setIsExpanded] = useState(expanded);

用于 expanding/collapsing 手风琴。下面是我的完整组件

Accordion.jsx

import React, { useState } from "react";

// styles
import styles from "./index.module.scss";

const Accordion = ({ index, data, expanded = true }) => {
  // state
  const [isExpanded, setIsExpanded] = useState(expanded);

  console.log(data.name, `prop-val==${expanded}`, `inner-state==${isExpanded}`);
  return (
    <div
      className={`${styles.container} caption ${isExpanded && styles.expanded}`}
    >
      <div className={styles.header} onClick={() => setIsExpanded(!isExpanded)}>
        <div>{data.name}</div>
        <div>Click</div>
      </div>
      <div className={styles.content}>
        {data.newValue && (
          <div className={styles.newValue}>
            <span>{data.newValue}</span>
          </div>
        )}
        {data.oldValue && (
          <div className={styles.oldValue}>
            <span>{data.oldValue}</span>
          </div>
        )}
      </div>
    </div>
  );
};
export default Accordion;

父组件有一个数据列表，它循环遍历该列表，为每个数据项创建一个手风琴。

App.js 文件

{dataList.map((data, index) => (
        <Accordion data={data} expanded={!collpaseAll} index={1} />
))}

问题来了

我的 App.js 文件中也有一个按钮，用于 expanding/collapsing 所有手风琴。
但是当我将它的值作为 prop expanded 传递给手风琴组件时，这个值就不会应用于手风琴组件的内部 isExpanded 状态。

这是 codesandbox 上的实时运行代码：https://codesandbox.io/s/goofy-nobel-qfxm1?file=/src/App.js:635-745

Answer 1

里面Accordion

const [isExpanded, setIsExpanded] = useState(expanded);

此行将采用第一次（首次渲染时）值。要在下次分配（重新渲染）值，您需要添加一个 effect

useEffect(() => {
   setIsExpanded(expanded);
}, [expanded]);

并且在你的情况下，你可以直接在Accordion中使用道具expanded，你不需要在本地state。

反应组件状态不更新传递的道具

React component state not updating with passed props

javascript

reactjs

react-hooks

react-state

问题来了