React Props 问题：红色下划线和意外行为

Question

大家好！

最近，我一直在开发一个以 ReactJs 作为前端的 Meme 项目。它基本上是一个简单的应用程序，可以让用户快速有效地制作表情包。直到昨天我醒来时遇到了一个非常奇怪的问题。 VS Code 表明在组件中使用 Props 存在问题。从昨天开始，我一直在努力解决这个问题，不幸的是，它降低了我的工作效率。 即使人工智能也无法解决这个问题。

问题1：所有组件中的道具下面都有红线。

• 示例行：Oome组件中的第 12 行
• function Oome ({savedMemes, setSavedMemes}) {...}

问题 2： 道具未按预期工作，每个道具下方都有红线。

• 示例行：TextInput组件中的第106行
• {(memeText.status.top.isMoreOn) && <p>more is on</p>}

注意：代码中的拼写错误是故意的。因为我的键盘缺少字母。 :)

调试尝试：

• 使用道具：我使用了props而不是直接调用property
• 简化：我简化了代码。希望问题源于它的复杂性。

不幸的是，这两种方式都没有改变问题。

下面的代码在帖子中之前每个问题下提到的行上都有 {/* 有问题的代码 */}。

当前代码：

• 应用程序组件：

import{ useEffect, useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Pages/Home/Oome";
import UserMemes from "./Pages/UserMemes/UserMemes";

const App = () => {
  const {savedMemes, setSavedMemes } = useState([]);

  useEffect(() => {
    console.log(savedMemes)
  }, [savedMemes])

  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={
            <Home savedMemes={savedMemes} setSavedMemes={setSavedMemes}
              
            />
          }
        />
        <Route path="/jallary" element={<UserMemes savedMemes={savedMemes} setSavedMemes={setSavedMemes} />} />
      </Routes>
    </Router>
  );
};

export default App;

• Oome 组件：

import { useEffect, useState , useRef} from "react";
import "./Oome.css";
import Navbar from "../../Components/NavBar/Navbar";
import BottomeNavBar from "../../Components/BottomNavBar/BottomNavBar";
import Preview from "../../Components/Preview/Preview";
import TextInput from "../../Components/TextInput/TextInput";

import html2canvas from "html2canvas";
import { Download } from "../../Components/Download/Download";
import { GetMemeButton } from "../../Components/GetMemeButton/GetMemeButton";

{/* Code With Problem */}
function Oome ({savedMemes, setSavedMemes}) {
  const [selectedFile, setSelectedFile] = useState(``);
  const imeRef = useRef()

  function andleDownload() {
    html2canvas(imeRef.current, { useCORS: true }).then((canvas) => {
        const link = document.createElement("a");
        link.href = canvas.toDataURL("image/png");
        link.download = "download.png";
        link.click();
      });
  }

  const [memeText, setMemeText] = useState({
    top: {
      topText: ``,
      color: ``,
    },
    bottom: {
      bottomText: ``,
      color: ``,
    },
    imae: {
        data: null,
      },
    status : {
        date: null,
        top: {
          isMoreOn: false
        },
        bottom: {
          isMoreOn: false
        }
    }
  });

 

  useEffect(() => {
    if (selectedFile) {
      setMemeText((prevMemeText) => ({
        ...prevMemeText,
        imae: {
          data: selectedFile,
        },
        status : {
            date: new Date().getHours(),
            
            top: {
              isMoreOn: false,
            },
            bottom: {
              isMoreOn: false,
            }
        }
      }));
    }
    // savedMemes()
  }, [selectedFile]);

  
  return (
    <div className="oome-container">
      <Navbar setSelectedFile={setSelectedFile} />
      <Preview 
        selectedFile={selectedFile} 
        memeText={memeText}
        savedMemes={savedMemes}
        imeRef={imeRef}
      />
      <TextInput
        memeText={memeText}
        setMemeText={setMemeText}
        setSavedMemes={setSavedMemes}
        savedMemes={savedMemes}
        andleDownload={andleDownload}
      />
      
        <Download andleDownload={andleDownload}/>
        <GetMemeButton />
      <BottomeNavBar />
    </div>
  );
};

export default Oome;

• 文本输入组件：

import { useState } from 'react';
import './TextInput.css';

const TextInput = ({setMemeText, memeText, setSavedMemes, savedMemes}) => {
    
    

    function andleTopText(event) {
        const topText = event.target.value
        console.log(topText)
        
        setMemeText(prevMemeText => (
            {
                ...prevMemeText,
                top : {
                    ...prevMemeText.top,
                    topText: topText,
                }
                
            }
        ))
    }
    function andleTopColor(event) {
        const topColor = event.target.value
        console.log(topColor)
        
        setMemeText(prevMemeText => (
            {
                ...prevMemeText,
                top : {
                    ...prevMemeText.top,
                    color: topColor
                }
                
            }
        ))
    }
    function andleBottomText(event) {
        const bottomText = event.target.value
        console.log(bottomText)
        
        setMemeText(prevMemeText => (
            {
                ...prevMemeText,
                bottom : {
                    ...prevMemeText.top,
                    bottomText:bottomText
                }
                
            }
        ))
    }

    function andleBottomColor(event) {
        const bottomColor = event.target.value
        console.log(bottomColor)
        
        setMemeText(prevMemeText => (
            {
                ...prevMemeText,
                bottom : {
                    ...prevMemeText.top,
                    color: bottomColor 
                }
                
            }
        ))
    }

    function andleSaveMeme() {
        setSavedMemes(prevSavedMemes => ([
            ...prevSavedMemes,
            memeText
        ]))
        console.log(`savedMemes: `, savedMemes)
    }

    const [isMoreOn, setIsMoreOn] = useState(false)

    function andleMoreClick(position) {
        setIsMoreOn((prev) => !prev)
        setMemeText((prev) => ({
            ...prev,
            status: {
                ...status,
                [position]: isMoreOn
            }
        }) 
        )
    }

  return (
    <div className='text-input--container'>
        <label className='label'>
            Setup:
        <textarea type='text'
            placeholder='Meme Setup'
            onChange={(event) => andleTopText(event)}
        />
        <input type='color'
            onChange={(event) => andleTopColor(event)}
        />
        <button
            onClick={() => andleMoreClick('top')}
        >More</button>
        {/* Code With Problem */}
        {(memeText.status.top.isMoreOn) && <p>more is on</p>}
        </label>
        <label className='label'>
            Punchline:
        <textarea type='text'
            placeholder='Meme Punchline'
            onChange={(event) => andleBottomText(event)}
        />
        
        <input type='color'
            onChange={(event) => andleBottomColor(event)}
            className='red'
        />
        </label>
        <button 
            onClick={andleSaveMeme}
        >Save in gallery</button>
        
    </div>
  )
}

export default TextInput

任何帮助将不胜感激！我正在寻找有关如何解决道具问题的建议，或者是否存在我可能忽略的常见错误。谢谢！

Answer 1

也许这会有所帮助。

参考 参考