在 React Context 中，如何在 state 函数中使用 state 变量？

Question

I have a React Context which looks like this:

import React, { Component } from 'react'

const AlertsContext = React.createContext({
  categoryList: [],
  setCategoryList: () => {}
})

export class AlertsProvider extends Component {

  state = {
    categoryList: [],
    setCategoryList: categoryString => (
      this.categoryList.includes(categoryString)
        ? this.setState({ categoryList: this.categoryList.filter(value => value !== categoryString) })
        : this.setState({ categoryList: this.categoryList.concat([categoryString]) })
    )
  }

  render() {
    const { children } = this.props
    const {categoryList, setCategoryList } = this.state

    return (
      <AlertsContext.Provider value={{categoryList, setCategoryList}}>
        {children}
      </AlertsContext.Provider>
    )
  }
}

export const AlertsConsumer = AlertsContext.Consumer

So, categoryList is an array of strings, each representing a category. setCategoryList should take a string; if that string is already in the array, it removes it, and if it's not in the array it adds it.

In one of my components the user can select categories from a list of checkboxes. When a checkbox is clicked, the AlertsContext setCategoryList should be called with the value of the clicked box:

import React, { Component } from 'react'
import { AlertsConsumer } from '../../../context/alerts-context'


    class AlertFilters extends Component {
    
      constructor(props) {
        super(props)
        this.state = {
          categories: props.categories
        }
      }
    
      render() {
        const { categories } = this.state
    
        return (
          <AlertsConsumer>
            {({ categoryList, setCategoryList }) => (
              <>
                {
                categories.map(category => (
                  return (
                    <div key={category.id}>
                      <Checkbox id={category.id} value={category.value} onChange={e => setCategoryList(e.target.value)} checked={categoryList.includes(category.value)} />
                      <label htmlFor={category.id}>{category.value}</label>
                    </div>
                  )
                ))
                }
              </>
            )}
          </AlertsConsumer>
        )
      }
    }
    
    export default AlertFilters

This compiles ok, but when I run it and click a checkbox I get the following error:

alerts-context.jsx:77 Uncaught TypeError: Cannot read property 'includes' of undefined

This is in the line:

  this.categoryList.includes(categoryString)

in the Context Provider, suggesting that "this.categoryList" is undefined at this point.

I tried changing it to

this.state.categoryList.includes(categoryString)

but it said I had to use state destructuring, so I changed to:

setCategoryList: (categoryString) => {
      const { categoryList } = this.state
      categoryList.includes(categoryString)
        ? this.setState({ categoryList: categoryList.filter(value => value !== categoryString) })
        : this.setState({ categoryList: categoryList.concat([categoryString]) })
    }

which highlighted the ternary operator and gave the following lint error:

Expected an assignment or function call and instead saw an expression.

What am I doing wrong?

Answer 1

Use if/else syntax to update the state.

setCategoryList: categoryString => {
  const { categoryList } = this.state;
  if (categoryList.includes(categoryString)) {
    this.setState({
      categoryList: categoryList.filter(value => value !== categoryString)
    });
  } else {
    this.setState({ categoryList: categoryList.concat([categoryString]) });
  }
};