我想向組件添加一組<TokenFeed/>功能<Feeds/>組件。問題是，當我這樣做時，onClick()將一些文本傳遞給我的事件<App/>沒有按預期作業。<TokenFeed/>單擊時的陣列版本將替換我的<input/>文本而不是附加到它的末尾。
相反，當我<TokenFeed/>在 的回傳中添加 的副本<Feeds/>并單擊按鈕時，它作業正常。
我怎樣才能解決這個問題？
演示
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>
);
};
uj5u.com熱心網友回復：
您需要let tokenFeedArr = [];在Feeds組件內部宣告。
代替：
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"}
/>
);
}
...
tokenFeedArr在Feeds組件外宣告的不能作業的原因與 JavaScript 閉包有關。
只有在安裝組件時的內部value()實體才能訪問的函式（這是一個空字串）。它沒有通過 React 狀態連接，因為它超出了匯出組件的范圍。TokenFeedtokenFeedArrinputValueinputValue
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/358339.html
標籤：javascript 反应 反应钩子 反应道具 反应功能组件
上一篇：Firebase實時資料庫正在Unity3d中添加額外的結果元素
下一篇：在運行時以編程方式更改SVG類