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

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中移除state，然后在FilterBox中再次调用一个与onClick相同的父函数。

看到这个，

过滤框,

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

index.js

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

希望你明白了。请忽略任何代码错字。

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

setState not working when refactoring to import components

setstate

reactjs

react-native