reactjs 在React js中使用usememo时出现错误？

e4yzc0pl 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(381)

我正在尝试使用React js中的useMemo钩子。根据函数，我们正在对包含字符串的数组进行排序。但是，当从函数返回数组时，它只是返回数组的第一个元素。您能帮助我理解我在其中做错了什么吗？

import { useState } from "react";
import { useMemo } from "react";

export default function MemoExample2() {

  const [nameList, setNameList] = useState(['a', 'b', 'r', 'e']);

  const [sortedList] = useMemo(() => {
    console.log([...nameList].sort());
    return [...nameList].sort();

  }, [nameList]);

  function addLetter(e) {
    console.log()
    const letter = document.querySelector("#letter").value;

    setNameList([...nameList, letter]);
  }



  return <>
    <div>Unsorted: {nameList.join(' ,')}</div>
    <div>Sorted: {sortedList.join(',')}</div>
    <input type="text" id="letter" />
    <button onClick={addLetter}>Add Name</button>
  </>

}

输出应该是打印在HTML文档上的排序数组。

reactjs

来源：https://stackoverflow.com/questions/74612710/getting-error-while-using-usememo-in-react-js

1条答案

按热度按时间

2hh7jdfx1#

2代码存在问题。
1.正如@Nick所说，您将变量用作数组，并且从useMemo返回单个元素，而不是数组[]。
1.另外，不要在React中使用document.querySelector，应该使用useRef。
下面是解决了两个问题的示例代码，它可以正常工作。

import { useMemo, useRef, useState } from "react";

export default function App() {
  const ref = useRef();
  const [nameList, setNameList] = useState(["a", "b", "r", "e"]);

  const sortedList = useMemo(() => {
    console.log([...nameList].sort());
    return [...nameList].sort();
  }, [nameList]);

  function addLetter(e) {
    const letter = ref.current.value;
    setNameList([...nameList, letter]);
  }

  return (
    <>
      <div>Unsorted: {nameList.join(", ")}</div>
      <div>Unsorted: {sortedList.join(", ")}</div>
      <input ref={ref} type="text" id="letter" />
      <button onClick={addLetter}>Add Name</button>
    </>
  );
}

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 在React js中使用usememo时出现错误？

1条答案

相关问题

热门标签

最新问答