通过上下文反应 useState 数组更新问题

Question

我有一个数组，通过 useState 钩子，我尝试通过我通过上下文提供的函数将元素添加到该数组的末尾。然而，数组的长度永远不会超过 2，元素 [0, n] 其中 n 是我在第一个元素之后推送的最后一个元素。

我已经简化了一点，并没有测试过这么简单的代码，不过它并不复杂。

MyContext.tsx

interface IElement = {
  title: string;
  component: FunctionComponent<any>;
  props: any;
}

interface IMyContext = {
  history: IElement[];
  add: <T>(title: string, component: FunctionComponent<T>, props: T) => void
}

export const MyContext = React.createContext<IMyContext>({} as IMyContext)

export const MyContextProvider = (props) => {
  const [elements, setElements] = useState<IElement[]>([]);

  const add = <T extends any>(title: string, component: FunctionComponent<T>, props: T) => {
    setElements(elements.concat({title, component, props}));
  }

  return (
    <MyContext.Provider values={{elements, add}}>
      {props.children}
    </MyContext.Provider>
  );
}

在其他元素中，我使用此上下文添加元素并显示当前元素列表，但无论添加多少，我都只会得到 2 个。

我通过 onClick 从各种元素中添加，并通过使用添加的组件的侧边栏显示。

SomeElement.tsx

const SomeElement = () => {
  const { add } = useContext(MyContext);

  return (
    <Button onClick=(() => {add('test', MyDisplay, {id: 42})})>Add</Button>
  );
};

DisplayAll.tsx

const DisplayAll = () => {
  const { elements } = useContext(MyContext);

  return (
    <>
      {elements.map((element) => React.createElement(element.component, element.props))}
    </>
  );
};

Answer 1

听起来您的问题是在一次渲染中多次调用add。您可以通过使用 setState 的回调版本来避免在当前接受的答案中添加 ref：

const add = <T extends any>(title: string, component: FunctionComponent<T>, props: T) => {
  setElements(elements => elements.concat({title, component, props}));
};

使用回调版本，您将始终确保引用 当前 状态，而不是闭包中可能陈旧的值。

Answer 2

如果您在同一个渲染中多次调用 add，以下内容可能会有所帮助：

interface IElement = {
  title: string;
  component: FunctionComponent<any>;
  props: any;
}

interface IMyContext = {
  history: IElement[];
  add: <T>(title: string, component: FunctionComponent<T>, props: T) => void
}

export const MyContext = React.createContext<IMyContext>({} as IMyContext)

export const MyContextProvider = (props) => {
  const [elements, setElements] = useState<IElement[]>([]);
  const currentElements = useRef(elements);

  const add = <T extends any>(title: string, component: FunctionComponent<T>, props: T) => {
    currentElements.current = [...currentElements.current, {title, component, props}];
    setElements(currentElements.current);
  }

  return (
    <MyContext.Provider values={{history, add}}>
      {props.children}
    </MyContext.Provider>
  );
}