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

Question

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

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

Accordion 组件也有一个内部状态

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

用于展开/折叠手风琴。 下面是我的完整组件

手风琴.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 文件中还有一个按钮，用于将所有手风琴展开/折叠在一起。
但是当我将它的值作为 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的 props ，你不需要在本地state使用它。