如果父项中的参数发生更改，则子组件的数组不会被重新渲染

Question

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

调用下面的函数（findApplicableFields）onChange使用按钮添加的字段（该方法存在于父类中）。

const findApplicableFields = (questions, questionName, optionName, currentQuestion) => {
 const newSubSectionList = questions.map(question => {
            if (question.name === questionName) {
                return { ...question, children };
            }
            return { ...question };
        });
 subSectionList[questionName] = newSubSectionList;
}

下面是孩子的代码sn-p：

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'
};

下面是需要重新渲染的sub child的sn-p代码：

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;

Answer 1

发生这种情况是因为您没有更改 subSectionList 变量，而是操作其内容（在对象中添加和删除属性）。 只有当它们绑定的变量完全改变（换句话说，它们在内存中交换）时，React 才会重新渲染 Components。 React 通过在新旧状态变量之间执行shallow comparison 来识别更改。在您的情况下，变量 subSectionList 始终相同（因为您只是向其添加属性），因此 React 不会重新渲染 <AddAccount /> 和 <Account />。

为了重新渲染 <AddAccount /> 和 <Account />，您必须通过在父组件中调用 setState 来重新创建整个 subSectionList：

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

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

这将在内存中生成一个全新的subSectionList 数组，使 React 重新渲染所有依赖它的组件。