Question

我创建了一个手风琴组件，该组件具有data（object）和expanded（boolean）作为道具。 expanded props用于设置作为prop传递的组件的展开/折叠状态。

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

手风琴组件也具有内部状态

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

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

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文件中还有一个按钮，用于将所有手风琴一起展开/折叠。但是，当我将其值为prop expanded的值传递给手风琴组件时，该值不会应用于手风琴组件的内部isExpanded状态。

以下是在codeandbox上的实时运行代码：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]);

在这种情况下，您可以直接在expanded内部使用道具Accordion，而不必将其放在本地state中。

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

这里出问题了

1 个答案: