Question

我遇到了一个问题，即使用 const [currentText, setCurrentText] = useState(""); 行更新状态 setCurrentText(script[property].text); 不会重新渲染组件。我已验证状态实际上已更新，但组件不会使用新值重新渲染。

  function nextScriptLine() {
    for (const property in script) {
      if (script[property].index === count) {
        setCount((count) => {
          return count + 1;
        });
        // console.log(script[property]); correct entry
        break;
      }
    }
    for (const property in script) {
      if (script[property].index == count) {
        setCurrentText(script[property].text);
        // console.log(currentText); correct and expented value
        break;
      }
    }
  }

        <TextBox
          input={currentText === "" ? script.introText.text : currentText}
          toggleWithSource={toggleWithSource}
          nextScriptLine={nextScriptLine}
          disableSound={currentText === ""}
        />

<块引用>

文本框组件

export default function TextBox({
  input,
  toggleWithSource,
  nextScriptLine,
  disabledSound,
}) {
  //   useEffect(() => {
  //     let tempObj = {};
  //     for (const property in script) {
  //       if (!property.read) {
  //         tempObj = script[property];
  //         setScript({ [property]: { read: true } });
  //         break;
  //       }
  //     }
  //   }, [script]);

  return (
    <span className="gameText">
      {textHandler(input, toggleWithSource, disabledSound)}
      <SubdirectoryArrowLeftIcon onClick={() => nextScriptLine()} />
    </span>
  );
}

chrome 开发者工具，react 组件查看器，在调用 nextScriptLine() 后显示正确的 props 和 state：

props

disableSound
:
false

input
:
"Oh dear, you appear to have set yourself on <span class='cast'>fire</span> and died. Let's try that again.\\nTry casting <span class='cast>self fire extend</span>'"
nextScriptLine
:
ƒ nextScriptLine() {}
toggleWithSource
:
ƒ toggleWithSource() {}
new entry
:

我已经阅读了许多论坛、stackoverflow 问题/答案，并阅读了多篇关于该问题的 media.com 文章，但都没有成功。我已经尝试过 useEffect（这会导致无限循环，无论如何它仍然没有更新的状态值），状态更新器（等待状态更新等），唯一似乎有效的是通过 setCurrentText 手动更新状态。< /p>

我开始认为异步的打字机效果 npm 包以某种方式搞乱了这一点，因为其余的状态更新和重新渲染工作正常。

<块引用>

我正在编写这个项目，因为我在编程停滞了一段时间后变得生疏，所以任何建议或提示都非常受欢迎。提前致谢！

<块引用>

更新

在注释掉打字机组件并只留下 return input 后，组件会重新正确渲染。我仍然想使用打字机效果包。有什么我可以做的事情吗？

打字代码：

export default function textHandler(input, toggleWithSource, disableSound) {
  <Typewriter
    onInit={(typewriter) => {
      typewriter
        .changeDelay(20)
        .typeString(input)
        .callFunction(() => {
          if (disableSound == false) {
            toggleWithSource();
          }
          alert(input);
        })
        .start();
    }}
  />
}

尝试了另一个打字机效果包，同样的问题。我得出的结论是，这肯定与异步问题有关。由于缺乏文档和我的知识，我可能会在没有这些包的情况下继续前进。不幸的是，我只是不知道如何让代码等待我假设的打字机效果完成。

React：状态更新后组件不会重新渲染

0 个答案: