React组件使用useState报Cannot read properties of null错误求助

错误原因 #

你的Meme.js文件最后一行导出语句存在问题：你直接调用了组件函数Memef()并导出执行结果，而非导出组件函数本身。

修正方案 #

将export default Memef ();修改为：

export default Memef;

原理说明 #

React组件必须以函数或类的形式导出，供React在渲染时调用。当你直接执行Memef()时，代码会在模块加载阶段就运行，此时React的组件渲染上下文尚未建立，React.useState无法在正确的React执行环境中调用，因此抛出错误。而将代码粘贴到index.js中时，你应该是通过<Memef />的方式正确渲染组件，此时函数是在React的渲染流程中被调用，useState能正常工作。

修正后的完整代码 #

import React from "react";
import memesArray from './memesData.js';

function Memef (){
    const urlnew = memesArray [1].url; 
    
    const [meme, setMeme] = React.useState({
        toptext: "",
        bottomtext: "",
        url: "https://imgflip.com/s/meme/Woman-Yelling-At-Cat.jpg"
    });
  
    function getMemeImage(){ 
            
        setMeme(prevmeme => {return {...prevmeme, url: urlnew}})
    }
  
    return(
        <main>
            <div className='form'>
                <input type="text" placeholder='Top text'></input>
                <input type="text" placeholder='Bottom text'></input>
                <button onClick={getMemeImage}>Generate</button>
            </div>
            <img className='meme' src={meme.url}></img>
            <p>{meme.toptext}</p>
            <p>{meme.bottomtext}</p>
        </main>
    )
  }

export default Memef;

内容的提问来源于stack exchange，提问作者Aida A.