时间戳

首页 > 解决方案 > useState 不强制重新渲染反应组件

reactjs - useState 不强制重新渲染反应组件

问题描述

我有一个组件，它的 propvalue是一个对象，其中一个属性value是aliases一个字符串数组。我有一个添加别名按钮，它应该为对象添加一个别名。我.map在组件中显示所有别名，但是当我添加别名时，组件不会重新渲染。我可以在浏览器中正确看到state更新react dev-tools，但组件不会重新呈现更新的列表。我究竟做错了什么？

import Accordion from "@components/common/Accordion"
import Alias from "./value-form/Alias"

const ValueItem = props => {
    const { value } = props
     
    /** EXAMPLE VALUE 

                   "id": 1,
                "name": "Primary Descriptor",
                "programmaticName": "Primary_Descriptor",
                "fileTypeDetailId": 9,
                "fileType": "File Type no. 9",
                "standardValue": "Outgoing",
                "isActive": true,
                "aliases": ["Alias 1", "Alias 2", "Alias 3"]
    */


    const dispatch = useDispatch()


    const [formValue, setFormValue] = useState(value)
    const [formAliases, setFormAliases ] = useState(value.aliases)

    const addAlias = () => {
        const updatedFormValue = formValue;
        updatedFormValue.aliases.push("");
        setFormValue(updatedFormValue)
        setFormAliases(updatedFormValue.aliases)
    }



    return (
        <Accordion
            key={value.id}
            title={value.name} />
            }
        >
            <div className={styles.valueFormContainer}>

                {formAliases.map((alias) => {
                    return ({alias})
                }
                )}
                <Button handleChange={() => { addAlias()}} buttonLabel="+ Add Alias" buttonTypes={["orange"]} />
            </div>
        </Accordion>)
}

export default ValueItem

标签： reactjsecmascript-6use-effectuse-state

解决方案

你的问题就在这里

 const addAlias = () => {
    const updatedFormValue = formValue;
    updatedFormValue.aliases.push("");
    setFormValue(updatedFormValue)
    setFormAliases(updatedFormValue.aliases)
}

你正在改变存在状态。

https://reactjs.org/docs/hooks-state.html

在你的情况下，我会使用

setFormValue(prevState=>[...prevState,aliases:[...prevState.aliases,""])

推荐阅读