为什么第 65 行的 findSymbol() 函数不起作用？

Question

我正在设计一个随机错误生成器。此代码中有两个按钮，“生成错误代码”将代码中的某些符号替换为其他符号，“查找错误代码”在单击它时显示替换的符号。但是这里 findSymbol( ）功能无法正常工作，导致“查找错误代码”生成空白输出。它根本不显示任何输出

import { Box, Button } from "@chakra-ui/react";
import React, { useRef, useState } from "react";
import Editor from "@monaco-editor/react";

const CodeEditor = () => {
  const editorRef = useRef();
  const [value, setValue] = useState("");
  const [output, setOutput] = useState("");
  const [showOutput, setShowOutput] = useState(false);
  const [replaceBtnDisabled, setReplaceBtnDisabled] = useState(false);
  const[findBtnDisabled , setfindBtnDisabled  ]  = useState(true)

  let outputDetails = ""; // String to hold replacement details
  const replaceSymbols = () => {
    const code = value;
    const lines = code.split("\n");
    let newCode = ""; // Initialize variable to hold modified code
    let replacementCount = 0; // Counter for replaced symbols
    let outputDetails = ""; // String to hold replacement details, reset for each button click
  
    // Calculate total number of characters in the input
    const totalChars = code.length;
  
    // Calculate replacement probability based on the length of the input
    const replaceProbability = 0.001 * (totalChars / 1000); // Adjust the scaling factor as needed
  
    // Iterate through each line
    for (let i = 0; i < lines.length; i++) {
      let line = lines[i];
  
      // Iterate through each symbol in the line
      for (let j = 0; j < line.length; j++) {
        // Randomly choose symbols to replace
        const replaceChance = Math.random(); // Random number between 0 and 1
  
        if (replaceChance < replaceProbability && replacementCount < 4) {
          const originalSymbol = line.charAt(j);
          const replacedSymbol = generateRandomSymbol(); // Function to generate random symbol
  
          // Replace symbol
          const lineArray = line.split("");
          lineArray[j] = replacedSymbol;
          line = lineArray.join("");
  
          // Append replacement details
          outputDetails += `Line no: ${i + 1}, Place: ${j + 1}, Original Symbol: ${originalSymbol}, Replaced Symbol: ${replacedSymbol}\n`;
          
          replacementCount++; // Increment replacement counter
        }
      }
  
      newCode += line + "\n"; // Append the modified line to newCode
    }
  
    // Update the textarea with the modified code
    setValue(newCode);
  
    // Enable the Show Output button and disable the Replace Symbol button
    setShowOutput(true);
    setReplaceBtnDisabled(true);
    setfindBtnDisabled(false);
  };
  

  function findSymbol(){
    // Update output details
    setOutput(outputDetails);
  }

  const generateRandomSymbol = () => {
    const symbols = "!@#$%^&*( )_+-=[]{}|;:,.< >?";
    const randomIndex = Math.floor(Math.random() * symbols.length);
    return symbols.charAt(randomIndex);
  };

  return (
    <>
      <Box>
        <Editor
          height="75vh"
          defaultLanguage="javascript"
          defaultValue="// some comment"
          theme="vs-dark"
          ref={editorRef}
          value={value}
          onChange={(value) => setValue(value)}
        />
        <Button onClick={replaceSymbols} isDisabled={replaceBtnDisabled}>
          Generate Faulty Code
        </Button>
        <Button onClick={findSymbol} isDisabled={findBtnDisabled}>
          Find Faulty Code
        </Button>
        {showOutput && (
          <Box id="output" style={{ whiteSpace: "pre-wrap" }}>
            {output}
          </Box>
        )}
      </Box>
    </>
  );
};

export default CodeEditor;

单击“查找错误代码”按钮时，必须显示输出详细信息。它没有显示任何内容

Answer 1

只是快速猜测一下，因为发生了一些事情，也许这会有所帮助。

删除顶级outputDetails或将其替换为useState，以便在更改时重新渲染

然后切换 setShowOutput(true) 和 setOutput(outputDetails)，因为看起来“output”应该保存outputDetails，而“showOutput”决定显示或隐藏输出值。

您可能只是将outputDetails转换为useState，还没有深入研究完整的用例，但希望这对您有所帮助，祝您一切顺利。

const CodeEditor = () => {
  const editorRef = useRef();
  const [output, setOutput] = useState("");
  const [showOutput, setShowOutput] = useState(false);

  const replaceSymbols = () => {
    ...
    let outputDetails = "";
    ...
    setOutput(outputDetails);
    ...
  };
  
  ...    

  function findSymbol(){
    setShowOutput(true);
  }

  ...

  return (
    <>
        <Button onClick={findSymbol}>
          Find Faulty Code
        </Button>
        {showOutput && (
          <Box id="output" style={{ whiteSpace: "pre-wrap" }}>
            {output}
          </Box>
        )}
    </>
  );
};

export default CodeEditor;