在 JSX 中映射时，React 函数调用不起作用答案

【问题标题】：React Function call not working when mapped in JSX在 JSX 中映射时，React 函数调用不起作用
【发布时间】：2021-05-17 10:24:29
【问题描述】：

我创建了一个函数，它在 React 中查找 JSON 数据并且它正在工作（我使用 console.log 检查），但是当我使用 JSX ({myFunction.map()}) 映射到 div 时，它没有显示任何输出。我已经尝试在该部分使用 console.log，但它也不起作用。

州：

  const [coins, setCoins] = useState([]);
  const [search, setSearch] = useState("");

这是获取请求：

  useEffect(() => {
    axios.get(
      "secret-url"
    ).then((res) => {
      setCoins(res.data);
      console.log(res.data);  **//This cosole.log working, showing all json data**
    }).catch((error) => {
      console.log(error);
    });
  }, []);

这里是函数：

  const filteredCoins = coins.filter((coin) => {
    coin.name.toLowerCase().includes(search.toLowerCase());
    console.log('ABCD'); **// This is working, meaning function is working**
  });

JSX 映射（此部分不起作用：

<div className="crypto-app">
  {filteredCoins.map(coin => { 
    console.log('ABCD'); **//Not Working**
    return <Coin key={coin.id} name={coin.name} price={coin.current_price} image={coin.image} volume= 
    {coin.volume} symbol={coin.market_cap} /> })}
</div>

【问题讨论】：

我在发布问题时搞砸了。但是在代码控制台中也没有工作，并且组件都没有被渲染。
您是否证明filteredCoins 列表在地图之前确实有一些内容？控制台中是否存在可能提供信息的错误？

标签： javascript reactjs

【解决方案1】：

filter 创建一个新数组，其中包含函数为其返回 true 的原始数组中的所有值。

您的函数没有 return 语句，因此它总是返回 undefined，因此 filteredCoins 为空。

然后你 map 覆盖空数组，这样映射函数就不会被调用（如果调用了，它会出错，因为你拼错了 console）。

【讨论】：

【解决方案2】：

试试这个代码。

<div className="crypto-app">
   {coins
    .filter((coin) => {`enter code here`
     if (search === "") {
       return coin;
     } else if (
        Object.values(coin)
        .toString()
        .includes(search.toLowerCase())
        ) {
         return coin;
       }
     })
      .map(coin => { 
      console.log('ABCD'); **//Not Working**
      return <Coin key={coin.id} name={coin.name} price={coin.current_price} image= 
      {coin.image} volume= {coin.volume} symbol={coin.market_cap} /> 
     }) 
</div>

【讨论】：