功能组件数组未按预期附加道具内容

Question

我想将<TokenFeed/> 功能组件的数组添加到<Feeds/> 组件。问题是当我这样做时，将一些文本传递给我的<App/> 的onClick() 事件无法按预期工作。单击时<TokenFeed/> 的数组版本将替换我的<input/> 文本，而不是附加到它的末尾。

相反，当我在<Feeds/>的返回中添加<TokenFeed/>的副本时， 并单击按钮，它工作正常。

我该如何解决这个问题？

Demo

import React, { useState } from "react";
import { Feeds } from "./Feeds";

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const [showFeeds, setShowFeeds] = useState();

  function createFeeds(e) {
    if (e._reactName === "onClick" && showFeeds === undefined) {
      setShowFeeds(
        <Feeds
          value={(val) => {
            setInputValue(inputValue + val);
            createFeeds("");
          }}
        />
      );
    } else {
      setShowFeeds(undefined);
    }
  }
  return (
    <>
      <input
        type="text"
        placeholder="Message"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      ></input>
      <button onClick={(e) => createFeeds(e)}>Create Feeds</button>
      {showFeeds}
    </>
  );
}

import React from "react";
import { TokenFeed } from "./TokenFeed";

let tokenFeedArr = [];

export const Feeds = (props) => {
  if (tokenFeedArr.length === 0) {
    tokenFeedArr.push(
      <TokenFeed
        key={"1"}
        onClick={() => props.value("Array")}
        tokenName={"Array"}
        tokenPrice={"Test"}
      />
    );
  }

  return (
    <section>
      {/* This doesn't work */}
      {tokenFeedArr}

      {/* This does work */}
      <TokenFeed
        key={"2"}
        onClick={() => props.value("Direct")}
        tokenName={"Direct"}
        tokenPrice={"Test"}
      />
    </section>
  );
};

import React from "react";

export const TokenFeed = (props) => {
  return (
    <section
      onClick={() => props.onClick()}
      style={{ backgroundColor: "yellow", width: "10%", textAlign: "center" }}
    >
      <h1>{props.tokenName}</h1>
      <p>{props.tokenPrice}</p>
    </section>
  );
};

Answer 1

您需要在Feeds 组件中声明let tokenFeedArr = [];。

代替：

let tokenFeedArr = [];

export const Feeds = (props) => {
  if (tokenFeedArr.length === 0) {
    tokenFeedArr.push(
      <TokenFeed
        key={"1"}
        onClick={() => props.value("Array")}
        tokenName={"Array"}
        tokenPrice={"Test"}
      />
    );
  }
...

试试这个：

export const Feeds = (props) => {
  const tokenFeedArr = [];
  if (tokenFeedArr.length === 0) {
    tokenFeedArr.push(
      <TokenFeed
        key={"1"}
        onClick={() => props.value("Array")}
        tokenName={"Array"}
        tokenPrice={"Test"}
      />
    );
  }
...

在Feeds 组件之外声明的tokenFeedArr 不起作用的原因与JavaScript 闭包有关。具体来说，问题出在value() 函数内，该函数位于tokenFeedArr 内的TokenFeed 实例内。

传递给tokenFeedArr 内TokenFeed 实例的value() 函数只能访问inputValue，因为它是在组件安装时（这是一个空字符串）。它没有通过 React 状态连接到 inputValue，因为它超出了导出组件的范围。即使TokenFeed 组件被推送到Feeds 组件内的tokenFeedArr，也是如此。 tokenFeedArr 仍然在 Feeds 之外声明。 setInputValue 函数之所以有效，是因为 useState 挂钩的工作原理，但 inputValue 变量只是一个变量，受 JavaScript 闭包/提升的影响，这会使其保留其原始值。