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）=

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>
  )
}