0

我正在尝试基于数组更新文本区域的值。从 textToEdit 值中，单击显示值按钮时，我试图提取 textToEdit 的每一行并更新视图，当调用使用效果时执行一些其他逻辑，然后再次调用 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/react-usestate-hook-example-v59wc

4

1 回答 1

-1

以下是如何更改代码以确保正确使用 useEffect 的方法。计数已更改为 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);
于 2019-07-07T20:28:44.693 回答