将数据推送到数组时，React功能组件未更新 [英] React functional component not updating when pushing data to array

问题描述

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

I have this functional component which is not updating when pushing data to an array:

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>
        </>
    )
}

单击添加体验后，映射没有更新，是否有帮助?

When Add experience is clicked the mapping is not updated, any help?

推荐答案

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

Although you're updating the variable, the component itself is not rerendering. A functional component will trigger a render when one of its props update.

为了获得所需的行为，您必须使用状态，或者使用 useState 钩子，或者使用带有状态的类组件.

In order to get the desired behavior, you have to use state, either with the useState hook or by using a class component with state.

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>
        </>
    )
}

这篇关于将数据推送到数组时，React功能组件未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！