javascript - 状态更改不会触发 componentDidMount()

问题描述

我有一个组件，它从 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 状态更新其值时都会更新过滤状态。

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

标签： javascriptreactjs

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

javascript - 状态更改不会触发 componentDidMount()

问题描述

解决方案

推荐阅读