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

Question

我有一个组件，它的道具 value 是一个对象，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

Answer 1

你的问题就在这里

 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,""])

Answer 2

您不能将新项目推送到数组以更新状态。您的 push 将直接改变状态，这可能会导致代码容易出错。如果您想将项目推送到状态数组，您可以使用 destructuring-assignment 制作状态的浅表副本，推送到它并最终使用复制的数组更新状态：

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

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

useState not forcing re-render of react component

ecmascript-6

reactjs

use-effect

use-state