时间戳

首页 > 解决方案 > 在 setState 之后反应不重新渲染/向 DOM 添加新元素

javascript - 在 setState 之后反应不重新渲染/向 DOM 添加新元素

问题描述

我的代码的 addProject 函数正在正确更新状态，但之后新项目没有添加到 DOM 中。为什么？

到目前为止我尝试了什么：

  1. 强制性升级（）
  2. 制作了数组的深层副本
  3. 将地图的键更改为项目标题
import React from 'react'

const productBacklog = [
    { id: 1, text: 'FrontEnd'},
    { id: 2, text: 'Finished page - for Cluster'}
];

const parkingLot = [
    { id: 1, text: 'Home page: Google Log In/Github API ---Update: Have Google Cloud account for this'},
    { id: 2, text: 'Screenshots of steps needed to setup test class w/annotation & imports' },
];

const projects = [
    { id: 1, title: 'Parking Lot', children: parkingLot },
    { id: 2, title: 'Product Backlog', children: productBacklog }
];

export default class App extends React.Component {

    constructor() {
        super();
        this.state = {
            projects: projects,
        }
    }

    addProject = () => {
        const newProject = {
            id: Math.round(Math.random() * 1000000),
            title: 'newProject',
            children: [],
        }
        const projects = [...this.state.projects];
        projects.push(newProject);
        this.setState({projects: [...projects]}, () => {
            console.log(this.state.projects)         // SHOWS THAT STATE IS UPDATED CORRECTLY
        })
    }

    render () {
        return (
            <div className='App'>
                <input type='button' value='Add project' onClick={this.addProject}/>
                <div className='projects'>
                    {projects.map((project, projectId) =>
                        <div className='Project' key={projectId}>
                            Project-Title: { project.title}
                        </div>
                    )}
                </div>
            </div>
        )
    }
}

标签： javascriptreactjsstate

解决方案

正如我在评论中所说，您需要映射this.state.projects. 你应该仔细命名事物。这只是因为你有一个名为的全局变量projects（它与组件的状态同步，在我看来是个坏主意），否则这将是一个明显的错误。另外我认为功能组件更好一点：

import React, { useState } from 'react';

const productBacklog = [
    { id: 1, text: 'FrontEnd'},
    { id: 2, text: 'Finished page - for Cluster'}
];

const parkingLot = [
    { id: 1, text: 'Home page: Google Log In/Github API ---Update: Have Google Cloud account for this'},
    { id: 2, text: 'Screenshots of steps needed to setup test class w/annotation & imports' },
];

const projects = [
    { id: 1, title: 'Parking Lot', children: parkingLot },
    { id: 2, title: 'Product Backlog', children: productBacklog }
];

export default function App() {

    const [state, setState] = useState({projects: projects})

    const addProject = () => {
        const newProject = {
            id: Math.round(Math.random() * 1000000),
            title: 'newProject',
            children: [],
        }
        setState({projects: [...state.projects, newProject]})
    }

    return (
        <div className='App'>
            <input type='button' value='Add project' onClick={addProject}/>
            <div className='projects'>
                {state.projects.map((project, projectId) =>
                    <div className='Project' key={projectId}>
                        Project-Title: { project.title}
                    </div>
                )}
            </div>
        </div>
    )
  }

推荐阅读