问题：
获取内部的React函数
司空修贤
我列出了一个有很多行的表，我想根据{transaction.to_address}值在每一行中使用一个新函数
我想在一个抓取函数中使用useeffect()函数，但是我得到了这个错误消息:渲染了比之前更多的钩子。我已经尝试了我在这里找到的许多解决方案，我已经花了几乎一整天，但我还不够聪明来修复它。
export default function Transactions({user}){
const Web3Api = useMoralisWeb3Api()
const [transactions, setTransactions] = useState()
const BASE_URL = "https://bscscan.com/tx/"
const fetchTransactions = async () => {
const data = await Web3Api.account.getTransactions({
chain: "bsc",
address: user.get('wallet2')
})
if(data) {
setTransactions(data.result)
}
}
useEffect(() => {
fetchTransactions()
}, [])
return(
<TableContainer>
<Table variant='simple'>
<TableCaption>TRANSACTIONS</TableCaption>
<Thead>
<Tr>
<Th>#</Th>
<Th>TYPE</Th>
<Th>GAS</Th>
<Th>VALUE</Th>
<Th>4</Th>
<Th>5</Th>
<Th>Value</Th>
</Tr>
</Thead>
<Tbody>
{transactions && transactions.map(transaction => (
transaction.value >= 1 ?
<Tr key={transaction.hash}>
<Th><Link href={`${BASE_URL}${transaction.hash}`} isExternal> {transaction.nonce}</Link></Th>
<Th>TRANS{transaction.block_timestamp}</Th>
<Th>{transaction.receipt_gas_used * Moralis.Units.FromWei(transaction.gas_price)} BNB</Th>
<Th>{Moralis.Units.FromWei(transaction.value)} BNB</Th>
<Th>{transaction.block_timestamp}</Th>
<Th>
{
useEffect(() => {
const url = "https://api.bscscan.com/api?module=contract&action=getsourcecode&address={transaction.to_address}&apikey=EEFI13SBM525DZ5ZNMBZHFEMVIT39DZA26";
const fetchData = async () => {
const response = await fetch(url)
const json = await response.json()
}
fetchData()
}, [])
}
</Th>
<Th><Link href={`${BASE_URL}${transaction.hash}`} isExternal> {transaction.hash}</Link></Th>
</Tr>
: null))}
</Tbody>
</Table>
</TableContainer>
)
}
这类似于我的问题，但不适用于我
未捕获的固定冲突：渲染的钩子比上一次渲染期间更多
共有2个答案
霍锦
我没有测试就尝试了，所以让我知道：
export default function Transactions({user}){
const Web3Api = useMoralisWeb3Api()
const [transactions, setTransactions] = useState(null)
const [transactionsAddress,setTransactionsAddress]= useState(null)
const BASE_URL = "https://bscscan.com/tx/"
const fetchTransactions = async () => {
const data = await Web3Api.account.getTransactions({
chain: "bsc",
address: user.get('wallet2')
})
if(data) {
setTransactions(data.result)
}
}
const fetchData = useCallBack(async (myUrl) => {
const response = await fetch(myUrl)
const json = await response.json()
return json},
[]);
useEffect(() => {
fetchTransactions()
}, [])
useEffect(() => {
transactions ?? (async ()=>{
let url=""
const fetchTransationsAddress= await Promise.all(transactions.map(async (transaction) => {
url = `https://api.bscscan.com/api?module=contract&action=getsourcecode&address=${transaction.to_address}&apikey=EEFI13SBM525DZ5ZNMBZHFEMVIT39DZA26`;
return await fetchData(url);
}));
setTransactionsAddress(fetchTransationsAddress);
})
}, [transactions])
return(
<TableContainer>
<Table variant='simple'>
<TableCaption>TRANSACTIONS</TableCaption>
<Thead>
<Tr>
<Th>#</Th>
<Th>TYPE</Th>
<Th>GAS</Th>
<Th>VALUE</Th>
<Th>4</Th>
<Th>5</Th>
<Th>Value</Th>
</Tr>
</Thead>
<Tbody>
{transactions && transactions.map((transaction,index) => (
transaction.value >= 1 ?
<Tr key={transaction.hash}>
<Th><Link href={`${BASE_URL}${transaction.hash}`} isExternal> {transaction.nonce}</Link></Th>
<Th>TRANS{transaction.block_timestamp}</Th>
<Th>{transaction.receipt_gas_used * Moralis.Units.FromWei(transaction.gas_price)} BNB</Th>
<Th>{Moralis.Units.FromWei(transaction.value)} BNB</Th>
<Th>{transaction.block_timestamp}</Th>
<Th>
{
//map here in your address, for example
transactionsAddress[index] && transactionsAddress[index].map((address) =>{return(<Td>{address}</Td>)})}
</Th>
<Th><Link href={`${BASE_URL}${transaction.hash}`} isExternal> {transaction.hash}</Link></Th>
</Tr>
: null))}
</Tbody>
</Table>
</TableContainer>
)
}
对于您的测试，像这样简化您的代码:
export default function Transactions({user}){
const Web3Api = useMoralisWeb3Api()
const [transactions, setTransactions] = useState(null)
const [transactionsAddress,setTransactionsAddress]= useState(null)
const BASE_URL = "https://bscscan.com/tx/"
const fetchTransactions = async () => {
console.log('fetchTransactions');
const data = await Web3Api.account.getTransactions({
chain: "bsc",
address: user.get('wallet2')
})
if(data) {
setTransactions(data.result)
}
}
const fetchData = useCallBack(async (myUrl) => {
console.log('callback fetchdata')
const response = await fetch(myUrl)
const json = await response.json()
return json},
[]);
useEffect(() => {
console.log('useEffect 1');
fetchTransactions()
}, [])
useEffect(() => {
console.log('useEffect 2');
if (transactions!==null){
(async ()=>{
let url="";
console.log('async function inside useEffect2')
const fetchTransationsAddress= await Promise.all(transactions.map(async (transaction) => {
url = `https://api.bscscan.com/api?module=contract&action=getsourcecode&address=${transaction.to_address}&apikey=EEFI13SBM525DZ5ZNMBZHFEMVIT39DZA26`;
return await fetchData(url);
}));
setTransactionsAddress(fetchTransationsAddress);
})();
}}, [transactions,fetchData])
console.log(transactions)
console.log(transactionsAddress)
return(<div>Go to your console</div>
)}
而且知道试着找毛病，可以加一些console.log(“你想要的”)来了解。您还需要检查您的API调用是否返回数据(取决于您的订阅，您可能会受到限制)
靳越
首先，我不认为在html代码中间使用useEffect钩子是个好习惯，useEffect应该总是在返回之前被调用。点击此处阅读更多内容。其次，您应该考虑这种方法是否有好处，因为在for循环中获取数据可能会给服务器带来很大的负载(这取决于您有多少事务以及每次发送多少请求)。
useEffect 用于在页面加载时获取数据，或者您可以向其放置参数，以便在参数更改时再次运行代码。您可以在不使用影响的情况下获取数据。
由于我无法复制您的代码，请尝试自己运行它。
export default function Transactions({ user }) {
const Web3Api = useMoralisWeb3Api();
const [transactions, setTransactions] = useState();
const [transaction, setTransaction] = useState();
const [finished, setFinished] = useState(false);
const BASE_URL = "https://bscscan.com/tx/";
const fetchTransactions = async () => {
const data = await Web3Api.account.getTransactions({
chain: "bsc",
address: user.get("wallet2"),
});
if (data) {
setTransactions(data.result);
setFinished(true);
}
};
useEffect(() => {
if (finished && transactions) {
let list = [];
Promise.all(
transactions.map(async (transaction) => {
const API = `https://api.bscscan.com/api?module=contract&action=getsourcecode&address=${transaction.to_address}&apikey=EEFI13SBM525DZ5ZNMBZHFEMVIT39DZA26`;
const data = await fetch(API);
if (data) {
list.push(data);
}
})
);
setTransaction(list);
setFinished(true);
}
}, [finished]);
return (
<TableContainer>
<Table variant="simple">
<TableCaption>TRANSACTIONS</TableCaption>
<Thead>
<Tr>
<Th>#</Th>
<Th>TYPE</Th>
<Th>GAS</Th>
<Th>VALUE</Th>
<Th>4</Th>
<Th>5</Th>
<Th>Value</Th>
</Tr>
</Thead>
<Tbody>
{transactions &&
transactions.map((transaction, index) =>
transaction.value >= 1 ? (
<Tr key={transaction.hash}>
<Th>
<Link href={`${BASE_URL}${transaction.hash}`} isExternal>
{" "}
{transaction.nonce}
</Link>
</Th>
<Th>TRANS{transaction.block_timestamp}</Th>
<Th>
{transaction.receipt_gas_used *
Moralis.Units.FromWei(transaction.gas_price)}{" "}
BNB
</Th>
<Th>{Moralis.Units.FromWei(transaction.value)} BNB</Th>
<Th>{transaction.block_timestamp}</Th>
<Th>{transaction[index].ContractName}</Th>
<Th>
<Link href={`${BASE_URL}${transaction.hash}`} isExternal>
{" "}
{transaction.hash}
</Link>
</Th>
</Tr>
) : null
)}
</Tbody>
</Table>
</TableContainer>
);
}
类似资料：
-
问题内容： 这是我之前的问题的后续工作，但是如果我在其中的映射如何在React的render（）方法中调用函数。 示例（此代码在extended的类内）： 无论我尝试什么，我总是最终得到“ this.getItemInfo（）不是一个函数”。 我在函数内部进行了on操作，实际上是在引用Window对象，但是我似乎找不到改变它的方法。 我累了： 定义为函数getItemInfo（）{..} 作为第二
-
C:\ns\example应用程序 C:\ns\example应用程序 C:\ns\example应用程序
-
我试图弄清楚如何从函数的外部获取变量，在jQuery的函数内部获取变量，但我得到的是。有什么办法可以做到这一点吗？ 我的代码的一个简单示例： 但当我在函数外定义变量时,它起作用： 为什么？ 感谢任何帮助！谢谢！
-
我试图运行一个简单的mapdb示例，但出现了以下错误： 我的班级： 我的pomx.xml 我跑得很快-
-
问题内容： 我有以下用例。 我的React组件中加载了一些第三方来源的HTML： 在外部加载的HTML内，存在一个针对特定范围的click事件，该事件应调用存在于我的应用程序中的回调函数。 我该把 myCallback 函数放在哪里？ 如果将其放在组件类中，则单击跨度时会收到以下错误，因为据我了解，该函数对外部加载的HTML不可见： Uncaught ReferenceError：在HTMLSpa
-
严格说来,Ruby中没有函数.但Kernel模块中定义的方法(可以在任何地方用做函数,因此)可被其他语言当做函数来调用.若您对这些方法进行再定义时,就必需考虑到对其他方面的影响. `str 把字符串str当做外部命令来运行,并以字符串方式返回命令的输出.使用`str`形式来调用该方法(还可以使用%x(...)表示法进行调用.请参考命令输出). 可以使用$?来了解命令的结束状态. 若您只想执行命令,