小编fur*_*ceX的帖子

我有两个“昂贵”的函数，我想在我的反应应用程序中记住它们，因为它们需要很长时间才能渲染。昂贵的函数用在数组映射中。我想记住数组映射的每个结果，这样如果数组的一个元素发生更改，只有该元素的昂贵函数将被重新计算。（并且要独立地记住昂贵的函数，因为有时只需要重新计算一个函数。）我正在努力解决如何记住并传递当前数组值的问题。

这是工作演示，没有记忆：

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

const input = ["apple", "banana", "cherry", "durian", "elderberry", "apple"];

export default function App() {
  const output = input.map((msg, key) => createItem(msg, key));
  return <div className="App">{output}</div>;
}

const createItem = (message, key) => {   // expensive function 1
  console.log("in createItem:", key, message);

  return (
    <div key={key}>
      <strong>{"Message " + (1 + key)}: </strong>
      {message} =>{" "}
      <span
        id={"preview-" + key}
        dangerouslySetInnerHTML={{ __html: msgSub(message) }}
      />
    </div>
  );
};

const msgSub = …

我是 React Hooks 的新手。我有一个带有多个输入的 UI，其中包含一个对象中的值。我用循环创建 UI，所以我想有一个单一的回调来更新输入。



“商店”输入使用它自己的回调并成功更新状态。但是“产品”输入永远不会更新状态。我真的不明白为什么这两个回调的行为不同。

代码如下。问题出在handleChange回调中。

import React, { useCallback, useState, useEffect } from "react";
import { TextField, Form } from "@shopify/polaris";

export default function TextFieldExample() {
  const [values, setValues] = useState({
    "prod-0": "Jaded Pixel",
    "prod-1": "blue diamonds"
  });
  const [shop, setShop] = useState("Joe's house of pancakes");

  const handleChangeShop = useCallback(newName => {
    setShop(newName);
  }, []);

  const handleChange = useCallback((newValue, id) => {
      console.log("Pre: values:", values);
      console.log(id, newValue);
      const newProds = values;
      newProds[id] = newValue;
      setValues(newProds); …