Question

如何根据父道具过滤组件中的数据？

我要比较的数据包含以下内容：

{
   "id": "5a7847508f9337cf77712128",
   "index": 0,
   "projectName": "Ovolo",
   "location": "Stoddard Place, Riverton, New York, 3571"
},
{
   "id": "5a7847503101a8ef7f7d3c30",
   "index": 1,
   "projectName": "Isonus",
   "location": "Elliott Walk, Magnolia, Minnesota, 4488"
}...

我的组件看起来像这样：

import React, {Component} from 'react';
import data from "../data/projects.json";

const ProjectTitle = data.filter((projects, props) => {
    if (projects.id === props.project_id ) 
    var title = projects.projectName;
    return title;
});

class ProjectName extends Component {
    constructor() {
        super();

        this.state = {
            projectTitle: ProjectTitle
        }
    }

    componentDidMount() {
      this.setState({
        projectTitle: ProjectTitle
      });
    }

    render() {
        return (
            <h4 className="projectName">
                { this.state.projectTitle }
            </h4>
        );
    }
}

export default ProjectName;

基本上，我想将父组件中的props.project_id与我的数据中与id匹配的第一个项目进行匹配，因此我可以使用该组件显示projectName。目前，我尝试的那个没有返回项目的名称。我是新手，所以我需要帮助和指导，也许一个例子或参考可能有所帮助。

Answer 1

不确定为什么它不能正常工作，但是你在课堂外创建的ProjectTitle并不适合我。我认为您将其分配给州并且没有按预期工作。您应该在React lifecycle 的componentWillMount函数中执行过滤（或查找）操作。找到项目后，你会执行setState，它应该可以工作。

class ProjectName extends Component {
        constructor() {
            super();

            this.state = {
                projectTitle: ''
            }
        }

        componentWillMount() {
          const project = data.find(project => project.id === this.props.project_id);
          if (project) {
              this.setState({
                projectTitle: project.projectName
              });
          }
        }

        render() {
            return (
                <h4 className="projectName">
                    {this.state.projectTitle}
                </h4>
            );
        }
    }

    export default ProjectName;

Answer 2

假设props.project_id是ProjectName的支柱，最简单的解决方案是将过滤器移动到渲染功能。另外，如果您要查找一条记录，请使用find而不是filter。

render() {
    const project = data.find(( {id} ) => id === this.props.project_id)
    return (
        <h4 className="projectName">
            { project && project.title }
        </h4>
    );
}

你可以像其他建议那样做，并在组件创建过程中设置状态，但是你必须在componentWillReceiveProps中做同样的事情，这会产生很多不必要的复杂性。

如果性能是一个问题（通常不是），并且您希望每个id只找到一次项目，请使用memoized函数并将逻辑保留在render函数中。这样更简单，效果也相同。

Answer 3

根据我的理解，基本上你想要观察从父节点发送的不同project_id，以及根据想要过滤数据的内容。

您可以做的一件事是使用componentWillReceiveProps生命周期来监视新的道具。还可以使用componentDidMount生命周期来设置项目标题。

您还需要更改projectTitle功能

import os

(spark.sparkContext.range(partitions)
    .map(lambda x: 'pid: {}'.format(os.getpid()))
    .collect())

# ['pid: 749', 'pid: 755', 'pid: 753', 'pid: 758']

通过添加componentWIllReceiveprops和componentDidMount，您可以每当传递新的project_id时动态更改项目名称作为道具。你也可以使用构造函数来初始化像这样的状态

const ProjectTitle = (projectId) => {
  const project = data.filter((projects) => {
    if (projects.id === projectId ) {
       return true;
    }
    return false
});
if(project) {
  return projects.projectName;
}
return project
}

componentWillReceiveProps(nextProps) {
   const {project_id} = nextProps
   const newProjectTitle = ProjectTitle(project_id)
   this.setState({
    projectTitle: newProjectTitle,
   })
}

componentDidMount() {
const {project_id} = this.props
   const newProjectTitle = ProjectTitle(project_id)
   this.setState({
    projectTitle: newProjectTitle,
   })
}

请参阅此lifecycle methods in react以获取更多参考资料

根据父道具过滤数据

3 个答案: