Question

警告：React尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户端所期望的。 React注入了新的标记以补偿哪些有效但你已经失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记在客户端或服务器上是不同的：

我一直收到上面的错误，我无法解决。 React告诉我客户端和服务器端的数据不同。这是因为我在render()函数上动态添加行：

render() {
    const projects = this.props.projects;
    const rows = [];

    for (const p in projects) {
        rows.push( <Project key={p} data={projects[p]} /> )
    }

    return (
        <section className="projects">
            <div className="container container--flex">
                {rows}
            </div>
        </section>
    );
}

项目来自使用Redux的州：

const mapStateToProps = state => ({
    projects: state.projects,
});

export default connect(mapStateToProps)(Projects);

所以我开始谷歌这个问题。主题Warning: React attempted to reuse markup in a container but the checksum was invalid建议在元素周围添加额外的<div>，但这不会改变任何事情。

动态添加内容的最佳做法是什么？

React Redux服务器/客户端渲染问题

0 个答案: