Javascript 如果父组件中的参数更改，则不会重新呈现子组件的数组

我是新来的。我必须实现一个按钮，在每次单击按钮时在页面上添加几个字段（文本框、选择框、复选框）。我通过引用示例实现了这一点。 我有三节课 1.父类，其中我编写了填充subSectionList的逻辑，该subSectionList定义了需要在单击按钮时添加的组件/字段。 2.子组件（AddAccount.js），它从父组件接收param subSectionList并将其传递给sub-Child Account.js的数组。此数组是在单击按钮时创建的，每次单击都会更新该数组。 3.子组件（Account.js），它接收param subSectionList并对其进行迭代以显示所需的组件。 问题：如果父项中subSectionList的值发生更改，则不会重新呈现sub-child Account.js。 以下是参考代码：

在更改使用按钮添加的字段时调用下面的函数（findApplicableFields）（父类中存在此methid）

下面是该子级的代码片段：

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Account from './Account';

export default function AddAccount({
    buttonText,
    type = 'button',
    buttonClass,
    questions,
    checkoutJourney,
    handleBlur,
    isValid,
    question,
    onChange,
    subSectionList,
    ...rest
}) {
    const [addAccount, setAddAccount] = useState(true);
    const [accountArray, setAccountArray] = useState(
        checkoutJourney['addAccountArray'] == null ? [] : checkoutJourney['addAccountArray']
    );
    let i = 0;

    const _onClick = e => {
        e.preventDefault();
        setAddAccount(true);
        setAccountArray([
            <Account
                key={i}
                questions={questions}
                checkoutJourney={checkoutJourney}
                handleBlur={handleBlur}
                onChange={onChange}
                isValid={isValid}
                questionName={question.name}
                subSectionList={subSectionList}
                {...rest}
            />,
            ...accountArray
        ]);
        checkoutJourney['addAccountArray'] = accountArray;
        checkoutJourney['subSectionList'] = subSectionList;
        i++;
    };
    return (
        <>
            {addAccount ? accountArray : null}
            <div className={buttonClass}>
                <button
                    className="button button--dark button--primary"
                    type={type}
                    onClick={e => {
                        _onClick(e);
                    }}
                >
                    {buttonText}
                </button>
            </div>
        </>
    );
}

AddAccount.propTypes = {
    _onClick: PropTypes.func,
    type: PropTypes.string,
    buttonText: PropTypes.string,
    buttonClass: PropTypes.string,
    questions: PropTypes.array,
    onChange: PropTypes.func,
    checkoutJourney: PropTypes.object,
    rest: PropTypes.object,
    handleBlur: PropTypes.func,
    isValid: PropTypes.object,
    question: PropTypes.any,
    subSectionList: PropTypes.object
};

AddAccount.defaultProps = {
    buttonText: '+ Add another account'
};

import React，{useState}来自“React”；
从“道具类型”导入道具类型；
从“./帐户”导入帐户；
导出默认函数AddAccount({
buttonText，
类型='按钮'，
按钮类，
问题，
结帐旅行，
车把，
是有效的，
问题:，
一旦改变，
分部分项清单，
休息
}) {
const[addAccount，setAddAccount]=useState（true）；
常量[accountArray，setAccountArray]=useState(
CheckOutTourney['addAccountArray']==null？[]：CheckOutTourney['addAccountArray']
);
设i=0；
const\u onClick=e=>{
e、 预防默认值（）；
setAddAccount（真）；
setAccountArray([
,
…帐户数组
]);
CheckOutTourney['addAccountArray']=accountArray；
签出旅程['subSectionList']=子部分列表；
i++；
};
返回(
{addAccount？accountArray:null}
{
_onClick（e）；
}}
>
{buttonText}
);
}
AddAccount.propTypes={
_onClick:PropTypes.func，
类型：PropTypes.string，
buttonText:PropTypes.string，
buttonClass:PropTypes.string，
问题：PropTypes.array，
onChange:PropTypes.func，
签出旅程：PropTypes.object，
rest:PropTypes.object，
handleBlur:PropTypes.func，
isValid:PropTypes.object，
问题:任何,，
subSectionList:PropTypes.object
};
AddAccount.defaultProps={
buttonText:“+添加其他帐户”
};

下面是需要重新呈现的sub-child的代码片段：

import React from 'react';
import PropTypes from 'prop-types';
import TextInput from '../TextInput/WS2TextInput';
import Select from '../Select/WS2Select';
import AddressMoreServices from '../AddMoreServices/AddMoreServices';
import Checkbox from '../Checkbox/Checkbox';
const Account = ({ checkoutJourney, handleBlur, isValid, onChange, subSectionList, questionName, ...rest }) => {

    return (
        <>
            {subSectionList[questionName].map((question, i, questions) => {
               //The logic to render the field based on type of question 
 })}
        </>
    );
}

Account.propTypes = {
    questions: PropTypes.array,
    onChange: PropTypes.func,
    checkoutJourney: PropTypes.object,
    rest: PropTypes.object,
    handleBlur: PropTypes.func,
    isValid: PropTypes.object,
    subSectionList: PropTypes.object,
    questionName: PropTypes.string
};

export default Account;

从“React”导入React；
从“道具类型”导入道具类型；
从“../TextInput/WS2tInput”导入TextInput；
从“../Select/WS2Select”导入Select；
从“../AddMoreServices/AddMoreServices”导入AddressMoreServices；
从“../Checkbox/Checkbox”导入复选框；
const Account=（{CheckOutTravel，handleBlur，isValid，onChange，subSectionList，questionName，…rest}）=>{
返回(
{subSectionList[questionName].map（（问题，i，问题）=>{
//根据问题类型呈现字段的逻辑
})}
);
}
Account.propTypes={
问题：PropTypes.array，
onChange:PropTypes.func，
签出旅程：PropTypes.object，
rest:PropTypes.object，
handleBlur:PropTypes.func，
isValid:PropTypes.object，
subSectionList:PropTypes.object，
问题名称：PropTypes.string
};
导出默认帐户；

发生这种情况是因为您没有更改

subSectionList

变量，而是操作其内容（在对象中添加和删除属性）。 如果绑定到组件的变量完全更改（换句话说，它们在内存中交换），React只会重新启动组件。React通过在新旧状态变量之间执行比较来识别更改。在您的情况下，变量

subSectionList

总是相同的（因为您只是简单地向它添加属性），因此React不会重新加载

和

为了重新加载

和

，您必须通过在父组件中调用

setState

来重新创建整个

子功能列表

：

const [subSectionList, setSubSectionList] = useState([]);

setSubSectionList([
    ...subSectionList,
    [questionName]: newSubSectionList
]);

---

这将在内存中生成一个全新的

subSectionList

数组，使React重新呈现依赖它的所有组件。

在我的例子中，subSectionList中的键将保持不变，只有键的值会改变。您能帮助我理解在这种情况下如何重新呈现child吗？@SomyaSrivastava您仍然需要生成一个全新的变量，如上面的示例所示。如果组件所依赖的变量在内存中完全交换，React将仅重新呈现组件。仅仅更改对象值是不够的。我已经完全设置了分区列表。但是，子项（Account.js）仍然没有被重新呈现，而更新的subSectionList正在子项中打印，即AddAccount.js

let newSubSectionList={}；subChildren.map（child=>{if（child.apply_to===optionName）{newSubSectionList[child.name]=true；}否则{newSubSectionList[child.name]=false；}）；设置订阅列表（newSubSectionList）我找到了原因，问题的发生是因为Account.js的数组。如果我移除数组，只使用一个在单击按钮时设置为true的标志来呈现Account.js，那么我的子项将在subSecTionList更改时重新呈现。但这种方法的问题是，我不能在单击“添加帐户”按钮时添加多个帐户对象。你能帮我吗
const [subSectionList, setSubSectionList] = useState([]);

setSubSectionList([
    ...subSectionList,
    [questionName]: newSubSectionList
]);