Question

我正在尝试根据用户单击药丸作为团队名称来更新页面上的一组数据。每个药丸都将状态设置为所单击的团队名称。一切都在一页上时一切正常，但是我试图降低复杂性并对其进行一些重构，但是我在各个组件的状态中苦苦挣扎。

感谢您的帮助！

index.js

import React from 'react';
import FilterBox from 'components/filters/FilterBox';
import ToolCard from 'components/Card';
import ToolInfo from './ToolInfo';

class Dashboard extends React.Component {
  constructor() {
    super();
    this.state = {
      teamName: null,
    };
  }

  render() {
    const filters = this.state;
    const filteredTools = ToolInfo.filter(
      (tool) => {
        return (filters.teamName === null || tool.teamName === filters.teamName);
      },
    );

    return (
      <FilterBox />

      {filteredTools.map((block) => ToolCard(block))}

    );
  }
}

export default Dashboard;

FilterBox.js

import React from 'react';
import { TeamFilters } from 'components/filters/Filters';
import SingleFilter from './SingleFilter';

class FilterBox extends React.Component {
  constructor() {
    super();
    this.state = {
      teamName: null,
    };
  }

  render() {

    return (
       {TeamFilters.map((data) => (
         <SingleFilter
           data={data}
           onClick={() => {
             this.setState({ teamName: data.teamStateName });
             });
           }}
         />
       ))}
    );
  }
}

export default FilterBox;

SingleFilter.js

import React from 'react';
import { Nav } from 'react-bootstrap';

const SingleFilter = ({ data, onClick }) => (
  <Nav.Item className='mr-1 mt-1' key={data.teamDisplayName}>
    <Nav.Link eventKey={data.teamDisplayName} onClick={onClick}>
      {data.teamDisplayName}
    </Nav.Link>
  </Nav.Item>
);

export default SingleFilter;

ToolCard.js

import React from 'react';

function ToolCard(props) {
  const tool = props;

  return (
    <Card with all of the tool info in it.. like..>
       {tool.title}
       {tool.description}
        etc
    <Card/>
  );
}

export default ToolCard;

TeamFilters.js

const TeamFilters = [   
  {   
    teamStateName: null,  
    teamDisplayName: 'All',  
  }, {   
    teamStateName: 'Accounting',  
    teamDisplayName: 'Accounting',  
  }, {   
    teamStateName: 'Data',  
    teamDisplayName: 'Data',  
  }, {
    teamStateName: '',  
    teamDisplayName: 'Other',  
  },  
];   

export default TeamFilters;

ToolInfo.js

const ToolInfo = [
  {
    title: 'Concur',
    description: 'Expense management',
    webUrl: 'example.com',
    teamName: 'Accounting',
  }, {
    title: 'BigQuery',
    description: 'Run Queries',
    webUrl: 'example.com',
    teamName: 'Data',
  }, {
    title: 'Toolio',
    description: 'Some misc tool',
    webUrl: 'example.com',
    teamName: '',
  },
];

export default ToolInfo;

Answer 1

您的主要状态位于index.js中，但是您正在未使用它的FilterBox中更改状态。

因此，您可以做的是从FilterBox中删除状态，然后再次调用与FilterBox中的onClick相同的父函数。

看到这个

FilterBox，

<SingleFilter
           data={data}
           onClick={() => {
             this.props.onClick(data.teamStateName);
           }}
/>

index.js

<FilterBox 
   onClick={(teamName) => {
      this.setState({ teamName });
   }}
/>

希望你知道了。请忽略任何输入错误。

重构导入组件时setState不起作用

1 个答案: