Question

我有一个从API调用的组件，该组件将所有数据存储到一个状态。并将此状态传递给呈现此数据的组件。我想向该数据添加过滤器：根据过滤器的状态，必须根据API的数据进行过滤并传递给呈现的组件，但是更改过滤器状态时不会更新该状态。

代码简化

class Leaderboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: [],
      filtered: [],
      filterSelected: 'sport,brand',
    }
  }

  componentDidMount() {
    this.props.firebase.cards().on('value', snapshot => {
      const cardsObject = snapshot.val()
      const cardList = Object.keys(cardsObject).map(key => ({
        ...cardsObject[key],
        uid: key,
      }));
      const filtered = cardList.filter(current => {
        return current.parameter === 'sport'
      })
      this.setState({
        cards: cardList,
        filtered: filtered,
      })
    })
  }

  render() {
    const handleFilterChange = event => {
      this.setState({filterSelected: event.target.value})
    };

    return (
      <div>
        <Typography>LEADERBOARD</Typography>
        <Box>
          <Select
            id="filter-select"
            value={this.state.filterSelected}
            onChange={handleFilterChange}
          >
            <MenuItem value={'sport'}>Sport</MenuItem>
            <MenuItem value={'brand'}>Brand</MenuItem>
          </Select>
        </Box>
        <Grid container>
          <Table list={this.state.filtered} />
        </Grid>
      </div>
    )
  }
}

这是应该呈现过滤内容的另一个组件

export default function Table({list}) {
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>H1</TableCell>
            <TableCell align="right">H2</TableCell>
            <TableCell align="right">H3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {list.map(current=> (
            <TableRow key={current.name}>
              <TableCell component="th" scope="row">
                {player.name}
              </TableCell>
              <TableCell align="right">{current.parameter}</TableCell>
              <TableCell align="right">{current.location}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

首先加载结果，然后根据初始状态对结果进行过滤，例如，卡片状态下的项目总数为41，过滤状态为26，因此首先进行过滤。但是，当我为filterSelected状态修改状态时，组件或已过滤状态也不会自行更新。我想要的预期结果是每次filterSelected状态更新其值时都要更新过滤状态。

我的方法有什么问题？有更好的方法实现我的目标吗？

Answer 1

ComponentDidMount仅被触发一次。这就是它的工作方式。初始渲染后仅立即触发一次。您还应该使用ComponentDidUpdate。我鼓励您更好地将此类组件转换为功能组件，并使用useState和useEffect钩子。

状态更改不会触发componentDidMount（）

1 个答案: