时间戳

首页 > 解决方案 > React 组件状态未使用传递的道具更新

javascript - React 组件状态未使用传递的道具更新

问题描述

我创建了一个 Accordion 组件，它具有数据（对象）和扩展（布尔）作为道具。 expandedprops 用于设置作为 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;

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

应用程序.js 文件

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

问题来了

我的 App.js 文件中还有一个按钮，用于将所有手风琴展开/折叠在一起。
但是当我将它的值作为 propexpanded传递给手风琴组件时，该值不会应用于isExpanded手风琴组件的内部状态。

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

标签： javascriptreactjsreact-hooksreact-state

解决方案

在 - 的里面Accordion

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

这条线将采用第一次（第一次渲染）值。要为其分配下次（重新渲染）值，您需要添加一个effect

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

expanded而在你的情况下，你可以直接在里面使用道具Accordion，你不需要在本地使用它state。

推荐阅读