如何在 render() 中定义 useState 变量 reactjs

Question

I am new to reactjs and I am defining useState variables inside render(){} method of reactjs but it is giving me error:Invalid hook call.

class ProductDefinition extends Component {
  constructor(props) {
    super(props);
      this.state = {
          onProductCreated: undefined,
    };
  }

    componentDidMount() {
    }
     
    render() {
        const [imageUrl, setImageUrl] = useState(undefined);
        const [loading, setLoading] = useState(false);

    const uploadButton = (
                <div>
                    {loading ? <LoadingOutlined /> : <PlusOutlined />}
                    <div style={{ marginTop: 8 }}>Upload</div>
                </div>
            );


            return(
            <div style={{ padding: '5px', textAlign: 'left' }}>
  <Form.Item
                                    label="Icon / Thumbnail URL:"
                                    name="productUrl"
                                 >

                                    <Upload
                                        name="avatar"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                       
                                    >
                                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                    </Upload>

                            </Form.Item>
                        </div>)

             }
}

What are the ways to define imageUrl and loading variable with useState outside render() method?

Answer 1

useState is the concept of React Hook , and you need to define the useState in the functional component, not class component.

 function ProductDefinition() { const [imageUrl, setImageUrl] = useState(undefined); const [loading, setLoading] = useState(false); const uploadButton = () => ( <div> {loading? <LoadingOutlined />: <PlusOutlined />} <div style={{ marginTop: 8 }}>Upload</div> </div> ); return ( <div style={{ padding: '5px', textAlign: 'left' }}> <Form.Item label="Icon / Thumbnail URL:" name="productUrl" > <Upload name="avatar" listType="picture-card" className="avatar-uploader" showUploadList={false} > {imageUrl? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />: uploadButton()} </Upload> </Form.Item> </div> ) }

Answer 2

I think you are get confused between function-based component and class based components. The hooks are only applicable for function based components.