如何在React中保持调用使用效应方法，直到条件为止

Question

我正在尝试根据数组来更新文本方面的值。从texttoedit值中，单击"显示值"按钮，我要提取TextToDoedit的每一行并更新视图，当使用使用效果时，请再次调用SetState以更新视图，然后执行其他逻辑。

。

换句话说，将每行附加到textarea并调用函数，然后附加另一行，调用函数，直到所有行都添加为止。

import React, { useState, useRef, useEffect } from 'react';
function App() {
  const [theme, setTheme] = useState('light');
  const [language, setLanguage] = useState('javascript');
  const [isEditorReady, setIsEditorReady] = useState(false);
  const valueGetter = `
    some random text line 1
    some random text line 2
    some random text line 3
    some random text line 4
  `
  const [code, setCode] = useState(valueGetter);
  const counts = useRef(0);
  const totalCount = useRef(0);
  useEffect(() => {
    console.log('counts.current', counts.current, totalCount.current);
    if (counts.current > 0 && counts.current < totalCount.current) {
      counts.current = counts.current + 1;
      const stringArr = valueGetter.split(/n/g);
      const newString = stringArr.splice(0, counts.current).join('n');
      // need to do someother logic
      setCode(newString);
    }
  }, []);
  function handleShowValue() {
    console.log(valueGetter);
    counts.current = 1;
    const stringArr = valueGetter.split(/n/g);
    totalCount.current = stringArr.length;
    const newString = stringArr.splice(0, counts.current).join('n');
    setCode(newString);
  }
  function toggleTheme() {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }
  function toggleLanguage() {
    setLanguage(language === 'javascript' ? 'python' : 'javascript');
  }
  return (
    <>
      <button onClick={handleShowValue} disabled={!isEditorReady}>Show value</button>
      <textarea
         value={code}
      />
    </>
  );
}
export default App;

这只是添加一行。我究竟做错了什么？https://codesandbox.io/s/reeact-usestate-hook-example-v59wc

Answer 1

这是您可以更改代码以确保正确使用使用效率的方式。计数已更改为Usestate。阅读材料：https：//reactjs.org/docs/hooks-effect.html

import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Todo() {
  const valueGetter = `
    some random text line 1
    some random text line 2
    some random text line 3
    some random text line 4
  `;
  const [code, setCode] = useState(valueGetter);
  const [count, setCount] = useState(0);
  const totalCount = useRef(0);
  const style = {
    maxHeight: "575px",
    minHeight: "538px",
    resize: "none",
    padding: "9px",
    boxSizing: "border-box",
    fontSize: "15px"
  };
  useEffect(() => {
    console.log("counts.current", count, totalCount.current);
    const stringArr = valueGetter.split(/n/g);
    totalCount.current = stringArr.length;
    if (count > 0 && count < totalCount.current) {
      const newString = stringArr.splice(0, count).join("n");
      // need to do someother logic
      setCode(newString);
    }
  });
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Show value</button>
      <textarea value={code} style={style} />
    </>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Todo />, rootElement);