Question

我在react中具有以下无状态组件：

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import {Button, Form, FormGroup, Label, Input, FormText} from 'reactstrap';


function Trend() {
    const [state, setState] = useState({
        dataTypes: []
    });

    return (
        <Form>
            <FormGroup>
                <Input type="select" multiple>
                    {state.dataTypes.map(type => {
                        return <option>{type}</option>
                    })}
                </Input>
            </FormGroup>
        </Form>
    );
}

但是，每当我尝试运行它时，都会出现以下错误：

react.development.js:88 Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

但是，从上面的代码以及我的npm环境中可以看出，这些可能性都不对。

$ npm ls react
megaqc@1.0.0 /home/michael/Programming/MegaQC
└── react@16.8.6 

$ npm ls react-dom
megaqc@1.0.0 /home/michael/Programming/MegaQC
└── react-dom@16.8.6

是什么导致此错误？

“钩子只能在函数组件的主体内部调用”，而不会违反任何规则

0 个答案: