反应子组件不重新渲染映射状态

Question

我有一个表格设置如下

可能有任意多个类别，在父组件中动态创建如下

            <div>
                {
                    categories.map((category) => {
                        return (
                            <ProjectCategoryForm
                                category={ category.name }
                                key={ category.name }
                                handleChange={ handleDescriptions }
                                />
                        );
                    })
                }
            </div>

这个子组件处理每个单独类别的状态，其中可以输入多个产品描述。

const ProjectCategoryForm = (props) => {
const [descriptions, setDescriptions] = useState([]);

return (
    <div>
        <div className="form-row justify-content-start">
            <h3>{ props.category }</h3>
        </div>
        <div className="form-row">
            { 
                descriptions.map((description) => {
                    return (
                        <p>{ description }</p>
                    );
                })
            }
        </div>
        <Formik
            initialValues={{
                description: "",
            }}
            onSubmit={ (values, {resetForm}) => {
                var newDescriptions = descriptions;
                newDescriptions.push(values.description);
                console.log(newDescriptions);
                props.handleChange(props.category, newDescriptions);
                setDescriptions(newDescriptions);
                resetForm();
            }}
            ...

如您所见，每个类别都有一个处理添加新“描述”的表单。控制台日志确认正在正确创建新的描述，但是子组件永远不会重新渲染以更新该事实并实际显示来自 descriptions.map 的描述

Answer 1

var newDescriptions = descriptions;
newDescriptions.push(values.description);

您正在改变现有数组而不是创建一个新数组。因此，当您调用 setDescriptions(newDescriptions) 时，react 会将旧状态和新状态与 === 进行比较，发现它们是同一个数组，因此跳过渲染。

相反，创建一个新数组：

const newDescriptions = [...descriptions, values.description];