Reactjs, компонент класса к крючкам

Question

Я все еще начинающий с ReactJs. На самом деле я хочу переписать компоненты моего класса, чтобы перехватить компоненты, но у меня проблема с одной частью моего кода. Кто-нибудь может помочь мне переписать этот компонент для подключения?

Это мой код:

class App extends Component {
  state = {
    selected: {},
    data: data,
    filtered: data
  };

  handleChange = data => {
    if (data == null) {
      this.setState({
        filtered: this.state.data
      });
    } else {
      this.setState({
        selected: data,
        filtered: this.state.data.filter(d => d.client_id === data.id)
      });
    }
  };

  returnClientNameFromID = id => options.find(o => o.id === id).name;

  render() {
    const {
      state: { selected, data, filtered },
      handleChange
    } = this;


    return ( <div>
    ...

Answer 1

Вот что вы могли бы сделать. С useState вы всегда должны объединять объекты самостоятельно setState((prevState) => {...prevState, ... })

const App = () => {
  const [state, setState] = useState({
    selected: {},
    data: data,
    filtered: data
  })

  const handleChange = data => {
    if (data == null) {
      setState((prevState) => {
        ...prevState,
        filtered: this.state.data
      });
    } else {
      setState((prevState) => {
        ...prevState,
        selected: data,
        filtered: prevState.data.filter(d => d.client_id === data.id)
      });
    }
  };

  const returnClientNameFromID = id => options.find(o => o.id === id).name;

  const { selected, data, filtered } = state

  return() (
    <div> ... </div>
  )
}