将数据推送到数组时，React 功能组件未更新

Question

我有这个功能组件，它在将数据推送到数组时不会更新：

const Experience = (props) => {
    let experience = [{
        from:"", 
        to:"",
        employer_name:"",
        employer_number:""
    }];

    function addExperience() {
        experience = [...experience, {
            from:"", 
            to:"",
            employer_name:"",
            employer_number:"",
        }];
    }

    return (
        <>
            {experience.map((val, idx) => {
                let id = `exp-id-${idx}`

                return(
                    <div key={idx} id={id}>
                        ...
                    </div>
                )
            })}
            <button onClick={addExperience}>Add experience</button>
        </>
    )
}

单击添加体验时，映射未更新，有什么帮助吗？

Answer 1

尽管您正在更新变量，但组件本身并未重新渲染。功能组件将在其道具之一更新时触发渲染。

为了获得所需的行为，您必须使用状态，通过useState钩子或使用具有状态的类组件。

带有 React Hooks 的函数式组件

import React, { useState } from 'react';

const Experience = (props) => {
    const [experience, setExperience] = useState([{
        from:"", 
        to:"",
        employer_name:"",
        employer_number:""
    }]);

    function addExperience() {
        setExperience([...experience, {
            from:"", 
            to:"",
            employer_name:"",
            employer_number:"",
        }]);
    }

    return (
        <>
            {experience.map((val, idx) => {
                let id = `exp-id-${idx}`

                return(
                    <div key={idx} id={id}>
                        ...
                    </div>
                )
            })}
            <button onClick={addExperience}>Add experience</button>
        </>
    )
}

类组件

import React, { Component } from 'react'

class Experience extends Component {
    state = {
        experience: [{
            from:"", 
            to:"",
            employer_name:"",
            employer_number:""
        }]
    };

    function addExperience() {
        this.setState([...this.state.experience, {
            from:"", 
            to:"",
            employer_name:"",
            employer_number:"",
        }]);
    }

    return (
        <>
            {this.state.experience.map((val, idx) => {
                let id = `exp-id-${idx}`

                return(
                    <div key={idx} id={id}>
                        ...
                    </div>
                )
            })}
            <button onClick={this.addExperience}>Add experience</button>
        </>
    )
}