Как продолжать вызывать метод useEffect в реакции, пока не возникнет условие? - PullRequest
Новая
       24

Как продолжать вызывать метод useEffect в реакции, пока не возникнет условие?

0 голосов
/ 07 июля 2019

Я пытаюсь обновить значение текстовой области на основе массива. Из значения textToEdit, при нажатии кнопки показа значения я пытаюсь извлечь Каждая строка textToEdit и обновляет представление, когда вызывается эффект использования, делайте какую-то другую логику, затем снова вызывайте setstate для обновления представления и затем выполняйте некоторую другую логику.

Другими словами, Добавьте каждую строку в текстовое поле и вызовите функцию, затем добавьте другую строку, вызовите функцию, пока не будут добавлены все строки. 

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

1 Ответ

0 голосов
/ 07 июля 2019

Вот как вы можете изменить свой код, чтобы убедиться, что вы используете 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);
...