Question

我有一个用于呈现数据库中用户列表的类

    export default class Users extends React.Component {
    
      constructor() {
        super()
      this.state = {
          data : [] //define a state  

        }
      }
    
    renderUsers = () => {
        useEffect(() => {
          fetch('exemple.com')
            .then((response) => response.json())
            .then((json) => this.setState({data: json.result})) // set returned values into the data state
            .catch((error) => console.error(error))
        }, []);
    
       return  this.state.data.map((value,key)=>{ // map state and return some views 
            ......
          })
     }
    
     render() {
        return (
                 <View style={{ flex: 1 }}>
              {this.renderUsers()} //render results
            </View>
    
        );
      }
    }

问题是此代码将引发以下错误：

无效的Hook调用，只能在主体内部调用Hook 组件

我认为不可能在类组件内部使用钩子。如果不可能的话，从此类内的服务器获取数据的最佳方法是什么？

Answer 1

您不能在类组件中使用钩子。请改用componentDidMount。

Answer 2

挂钩只能在功能组件中使用。

您可以像这样将组件重写为功能组件：

export default Users = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('exemple.com')
            .then((response) => response.json())
            .then((json) => setData(json.result)) // set returned values into the data state
            .catch((error) => console.error(error))
    }, []);

    const renderUsers = () => {
        return data.map((value, key) => {
            // DO STUFF HERE
        })
    }

    return (
        <View style={{ flex: 1 }}>
            {renderUsers()} //render results
        </View>
    )

}

对类Components使用useEffect

2 个答案: