我要反应挂钩级联选择选项

如何解决我要反应挂钩级联选择选项

代码：

import React,{ useState } from 'react';


const lookup = {
  "num": [
    { id: '1',text: '1' },{ id: '2',text: '2' },{ id: '3',text: '3' },{ id: '4',text: '4' },{ id: '5',text: '5' }
  ],"en": [
    { id: 'a',text: 'a' },{ id: 'b',text: 'b' },{ id: 'c',text: 'c' },{ id: 'd',text: 'd' },{ id: 'e',text: 'e' }
  ]
}

const App = ({}) => {
  
  this.setState()

  const [ data ] = useState('num');

  const { data } = this.state;


    const options = lookup[data];
    
    return (
      <div>
        <select onChange = {({ target: { value } }) => {this.setState({ data: value })}}>
          <option value="num">Integers</option>
          <option value="en">Alphabets</option>
        </select>
        <hr />
        <select>
          {options.map(a => <option key={a.id} value={a.id}>{a.text}</option>)}
        </select>
      </div>
    );
  }

export default App;

错误：

Failed to compile
./src/App.js
  Line 30:11:  Parsing error: Identifier 'data' has already been declared

  28 |   const [ data ] = useState('num');
  29 | 
> 30 |   const { data } = this.state;
     |           ^
  31 | 
  32 | 
  33 |     const options = lookup[data];

从类组件更改为功能组件时发生错误。我英语不太好，我希望级联选择选项运行时仍会出现编译错误，我还是一个初学者，所以我不知道怎么了我该怎么解决 我想要一个功能组件，而不是一个类组件

解决方法

由于要转换为功能组件，因此无需使用this.state。

useState挂钩返回一个元组，其中第一个元素是状态，第二个元素是该状态的设置器。

因此，在您的情况下，您可以这样使用：

const [ data,setData ] = useState('num');

现在从onChange回调中调用setData。

<select onChange = {({ target: { value } }) => {setData(value);}}>

这将更新data状态并重新呈现组件。