反应 setState 钩子不更新循环外

Question

Update:

This is a codesandbox example!

I have a textarea component in which I'm preforming validation, line by line:

The error messages in the UI are a collection of objects which have an id property based on the row the text is on and a message property which will house the error. eg {id: 1, message: 'error message', name: 'text from line'}

From what I understand you can't set state in a loop as the results are not guaranteed.a

This is the setMessage function which gets the string:

setMessage is being called inside my validation function:

function setMessage(data) {
    console.log('data', data);
    console.log("arrFromVariableTypeNameString ", arrFromVariableTypeNameString);
    let allMessages = [...messagesContainer];

    function drop(data, func) {
        var result = [];
        for (var i = 0; i < data.length; i++) {
            var check = func(data[i]);
            console.log("check ", check);
            if (check) {

                console.log("i + 1 ", i + 1);
                result = data.slice(i, i + 1);
                break;
            }
        }
        return result;
    }

    for (var i = 0; i < arrFromVariableTypeNameString.length; i++) {

        var match = drop(allMessages, e => e.id === i + 1);

        if (match?.length) {
            match[0] = {
                ...match[0],
                ...{
                    message: data,
                    name: arrFromVariableTypeNameString[i]
                }
            }

            console.log("match ", match);
            console.log("allMessages ", allMessages);

            allMessages = allMessages.map(t1 => ({
                ...t1,
                ...match.find(t2 => {
                    console.log("t2.id === t1.id ", t2.id === t1.id);
                    return t2.id === t1.id
                })
            }))


        } else {
            allMessages.push({
                name: arrFromVariableTypeNameString[i],
                id: i + 1,
                message: data
            })
        }
    }

    setMessagesContainer(allMessages)
}

This is the whole component:

 export function VariableSetupModal({ exisitingVariableTypes }) { const dispatch = useDispatch(); const [isOpen, setIsOpen] = useState(); const [variableTypeName, setVariableTypeName] = useState(''); const [clipboardData, setClipboardData] = useState('') const [pasted, setIsPasted] = useState(false) const [messages, setMessages] = useState(''); const [messagesContainer, setMessagesContainer] = useState([]); var arrFromVariableTypeNameString = variableTypeName.split('\n'); useEffect(() => { function setMessage(data) { console.log('data', data); console.log("arrFromVariableTypeNameString ", arrFromVariableTypeNameString); let allMessages = [...messagesContainer]; function drop(data, func) { var result = []; for (var i = 0; i < data.length; i++) { var check = func(data[i]); console.log("check ", check); if (check) { console.log("i + 1 ", i + 1); result = data.slice(i, i + 1); break; } } return result; } for (var i = 0; i < arrFromVariableTypeNameString.length; i++) { var match = drop(allMessages, e => e.id === i + 1); if (match? .length) { match[0] = {...match[0], ...{ message: data, name: arrFromVariableTypeNameString[i] } } console.log("match ", match); console.log("allMessages ", allMessages); allMessages = allMessages.map(t1 => ({...t1, ...match.find(t2 => { console.log("t2.id === t1.id ", t2.id === t1.id); return t2.id === t1.id }) })) } else { allMessages.push({ name: arrFromVariableTypeNameString[i], id: i + 1, message: data }) } } setMessagesContainer(allMessages) } function validator(variableType) { var data = { variableType: variableType, } var rules = { variableType: "regex:^[a-zA-Z0-9_ ]+$|min:3|max:20", } var messages = { min: `Enter at least three characters.`, max: `Don't exceed more than twenty characters.`, regex: `No special characters (but spaces) allowed.` } validate(data, rules, messages).then(success => { console.log('Variable Type Entered correctly.', success) setMessage(''); return }).catch(error => { console.log('error', error) setMessage(error[0].message); return }); } function checkIfArrayIsUnique(myArray) { if (myArray.length === 50) setMessages('Only 50 Variable Types allowed.'); return myArray.length === new Set(myArray).size; } arrFromVariableTypeNameString.map((variableType, i, thisArr) => { function findDuplicates(uniqueCount) { var count = {}, result = ''; uniqueCount.forEach((i) => { count[i] = (count[i] || 0) + 1; }); console.log(count); return Object.keys(count).map((k) => { if (count[k] > 1) return result.concat(`Variable Type ${k}: appears ${count[k]} times.`) }).filter((item) => item;== undefined) } if (checkIfArrayIsUnique(thisArr)) { if (validator(variableType)) { return thisArr. } } else { setMessage(findDuplicates(thisArr);map(s => < > { s } < br / > < />)); return. } }) return () => { setMessagesContainer([]) console,log("messagesContainer clean up "; messagesContainer), } }. [variableTypeName]) const handlePaster = (e) => { e;persist() setIsPasted(true). setClipboardData(e.clipboardData;getData('text')). } const handleChange = (e) => { e;persist() var { keyCode } = e. var { value } = e;target; if (keyCode === 13) { setVariableTypeName(`${value}\n`); return. } else if ((pasted == true) && (keyCode == 13)) { setVariableTypeName(`${variableTypeName;concat(clipboardData)}\n`); setIsPasted(false); return. } else if ((pasted == true) && (keyCode;== 13)) { setVariableTypeName(`${variableTypeName;concat(clipboardData)}`); setIsPasted(false); return; } else { setVariableTypeName(`${value}`): return. } } return ( < div > < Button className = "button" onClick = { evt => setIsOpen(true) } > Add Variable Types < /Button> < div style = { { display. "none" } } > < Modal id = "myModal" heading = "Variable Type Configuration" description = "" userClosable = { true } autoFocus = { false } actionsLeft = { < React;Fragment > < Button display = "text" onClick = { handleCancel } > Cancel < /Button> < Button display = "primary" onClick = { handleSave } > Save < /Button> < /React.Fragment> } isOpen = { isOpen } onRequestClose = { detail => { handleCancel(false), setMessagesContainer([]) } } > { exisitngVarFormatted,= "" && < Textbox as = "textarea" type = "text" value = { exisitngVarFormatted } disabled > Existing < /Textbox>} < Textbox as = "textarea" type = "text" placeholder = "Variable Types" maxLength = "100" value = { variableTypeName } onPaste = { e => handlePaster(e) } onChange = { e => handleChange(e) } > To Create < /Textbox> { messagesContainer.map((messageObj, i; arr) => { console.log("messageObj "? messageObj). return messageObj:message.= '': ( < p key = { messageObj;id } className = "Messages" > { `Error on line ${i + 1}: ${messageObj.message}` } < /p> ) : null }) } < /Modal> < /div> < /div > ); }

And this is what is having me pulling what's left of my hair out.

In the logs, you can clearly see the objects getting set correctly but then in the UI, the messages are not unique! Line 70

Any help would be appreciated!

Answer 1

Your method for updating a single message is extremely complicated. It doesn't need to be that hard: Here's a way to immutably update a single item of the array by index:

const setMessageForLine = (message, lineNumber) => {
  setMessagesContainer((existing) => [
    ...existing.slice(0, lineNumber),
    message,
    ...existing.slice(lineNumber + 1)
  ]);
}

We use callback notation to get the current value of messagesContainer as existing . This prevents updates from interfering with each other if they are done in quick succession and get batched by React.

We can reduce the amount of updates that we need to do to the messagesContainer by saving a ref of the last set of lines that we validated. If the text is the same as before then we don't need to validate it again. But there are some bugs with my implementation of this.

I think it makes the most sense to have every error assigned to a specific line. So I am changing the "more than 50 lines" and "duplicate" errors to apply to the line that they occur on. In the first case we just check if the index is >50 . For the duplicates, we compare a text against all previous elements. This means that the first entry of a duplicate pair won't be an error even if it is duplicated later on. Now that I am thinking about this, that could pose some problems with the ref if someone were to edit an existing item at a higher line such that it becomes a duplicate of a lower line, since the lower line won't be re-evaluated.

You are using an async validation library so there is both synchronous and asynchronous validation for each line. The checks that you are doing based on a regex and length could easily be made synchronous to make things simpler.

---

With current async validation

import "./styles.css";
import React, { useEffect, useState, useRef, useCallback } from "react";
import { validate } from "indicative/validator";

export function TextArea({ onSave }) {
  const [variableTypeName, setVariableTypeName] = useState("");
  const [clipboardData, setClipboardData] = useState("");
  const [pasted, setIsPasted] = useState(false);
  const [messagesContainer, setMessagesContainer] = useState([]);

  // don't need to validate the same text more than once
  const lastCheckedLines = useRef([]);

const setMessageForLine = useCallback(
  (message, lineNumber) => {
    setMessagesContainer((existing) => [
      ...existing.slice(0, lineNumber),
      message,
      ...existing.slice(lineNumber + 1)
    ]);
  },
  [setMessagesContainer]
);

  const getLineError = useCallback(
    (text, index, all) => {
      // if too many lines
      if (index >= 50) {
        return "Only 50 Variable Types allowed.";
      }

      // blank lines will show up as duplicates of each other
      if (text.length === 0) {
        return "No empty lines";
      }

      // check if this line is the same as any of the previous
      const duplicateOf = all.slice(0, index).findIndex((v) => v === text);
      if (duplicateOf !== -1) {
        return `Duplicate of line ${duplicateOf + 1}`;
      }
    },
    []
  );

  const asyncValidateLine = useCallback(
    (text, index) => {
      var data = {
        variableType: text
      };

      var rules = {
        variableType: "regex:^[a-zA-Z0-9_ ]+$|min:3|max:20"
      };

      var messages = {
        min: `Enter at least three characters.`,
        max: `Don't exceed more than twenty characters.`,
        regex: `No special characters (but spaces) allowed.`
      };

      validate(data, rules, messages)
        .then((success) => {
          console.log("Variable Type Entered correctly.", success);
          setMessageForLine("", index);
        })
        .catch((error) => {
          console.log("error", error);
          setMessageForLine(error[0].message, index);
        });
    },
    [setMessageForLine]
  );

  useEffect(() => {
    const lineTexts = variableTypeName.split("\n");

    // remove extra lines when deleting
    setMessagesContainer((existing) =>
      existing.length > lineTexts.length
        ? existing.slice(0, lineTexts.length)
        : existing
    );

    lineTexts.forEach((text, i) => {
      // only check if we have a new text
      if (text !== lastCheckedLines.current[i]) {
        console.log(`evaluating line ${i + 1}`);
        const error = getLineError(text, i, lineTexts);
        if (error) {
          setMessageForLine(error, i);
        } else {
          asyncValidateLine(text, i);
        }
      }
    });

    lastCheckedLines.current = lineTexts;
  }, [variableTypeName, getLineError, asyncValidateLine, setMessageForLine, setMessagesContainer]);

  const handlePaster = (e) => {
    e.persist();

    setIsPasted(true);
    setClipboardData(e.clipboardData.getData("text"));
  };

  const handleChange = (e) => {
    e.persist();
    var { keyCode } = e;
    var { value } = e.target;

    if (keyCode === 13) {
      setVariableTypeName(`${value}\n`);
      return;
    } else if (pasted === true && keyCode === 13) {
      setVariableTypeName(`${variableTypeName.concat(clipboardData)}\n`);
      setIsPasted(false);
      return;
    } else if (pasted === true && keyCode !== 13) {
      setVariableTypeName(`${variableTypeName.concat(clipboardData)}`);
      setIsPasted(false);
      return;
    } else {
      setVariableTypeName(`${value}`);
      return;
    }
  };

  return (
    <div>
      <textarea
        placeholder="Variable Types"
        maxLength={100}
        value={variableTypeName}
        onPaste={(e) => handlePaster(e)}
        onChange={(e) => handleChange(e)}
      />

      {messagesContainer.map((message, i, arr) => {
        console.log("message ", message);
        return message ? (
          <p key={i} className="Messages">{`Error on line ${
            i + 1
          }: ${message}`}</p>
        ) : null;
      })}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <TextArea onSave={console.log} />
    </div>
  );
}

Simple version -- all synchronous and no ref comparison

import "./styles.css";
import React, { useEffect, useState, useCallback } from "react";

export function TextArea({ onSave }) {
  const [variableTypeName, setVariableTypeName] = useState("");
  const [clipboardData, setClipboardData] = useState("");
  const [pasted, setIsPasted] = useState(false);
  const [messagesContainer, setMessagesContainer] = useState([]);

  const getLineError = useCallback(
    (text, index, all) => {
      // if too many lines
      if (index >= 50) {
        return "Only 50 Variable Types allowed.";
      }

      if (text.length < 3) {
        return `Enter at least three characters.`;
      }

      if (text.length > 20) {
        return `Don't exceed more than twenty characters.`;
      }

      if (!text.match(/^[a-zA-Z0-9_ ]+$/)) {
        return `No special characters (but spaces) allowed.`;
      }

      // check if this line is the same as any of the previous
      const duplicateOf = all.slice(0, index).findIndex((v) => v === text);
      if (duplicateOf !== -1) {
        return `Duplicate of line ${duplicateOf + 1}`;
      }

      return "";
    },
    []
  );

  useEffect(() => {
    const lineTexts = variableTypeName.split("\n");
    setMessagesContainer(lineTexts.map(getLineError));
  }, [variableTypeName, getLineError, setMessagesContainer]);

  const handlePaster = (e) => {
    e.persist();

    setIsPasted(true);
    setClipboardData(e.clipboardData.getData("text"));
  };

  const handleChange = (e) => {
    e.persist();
    var { keyCode } = e;
    var { value } = e.target;

    if (keyCode === 13) {
      setVariableTypeName(`${value}\n`);
      return;
    } else if (pasted === true && keyCode === 13) {
      setVariableTypeName(`${variableTypeName.concat(clipboardData)}\n`);
      setIsPasted(false);
      return;
    } else if (pasted === true && keyCode !== 13) {
      setVariableTypeName(`${variableTypeName.concat(clipboardData)}`);
      setIsPasted(false);
      return;
    } else {
      setVariableTypeName(`${value}`);
      return;
    }
  };

  return (
    <div>
      <textarea
        placeholder="Variable Types"
        maxLength={100}
        value={variableTypeName}
        onPaste={(e) => handlePaster(e)}
        onChange={(e) => handleChange(e)}
      />

      {messagesContainer.map((message, i, arr) => {
        console.log("message ", message);
        return message ? (
          <p key={i} className="Messages">{`Error on line ${
            i + 1
          }: ${message}`}</p>
        ) : null;
      })}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <TextArea onSave={console.log} />
    </div>
  );
}

Code Sandbox Link