为什么 map 函数不遍历数组？

Question

我正在使用 React，我是新手，它说要使用 map 方法来迭代数组。当我这样做时，整个数组都会记录到控制台，而不是我想要的单个单词。

当用户在文本框中键入股票代码时，我试图调用它们。但是在函数getSymbol() 下，即使我在渲染中使用了map，符号的状态仍然是一个数组。谁能指出我正确的方向？或者我该怎么做才能获得单个元素。

这是我的代码：

class Symbol extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInput: '',
            symbol: [],
            isLoaded: false
        }
    }

    typeSymbol = (e) => {
        this.setState({
            userInput: e.target.value.toUpperCase()
        }, () => {
            console.log(this.state.userInput)
        })
    }

    getSymbol = (e) => {
        e.preventDefault(),
            this.setState({
                symbol: this.state.symbol

            }, () => {
                console.log(this.state.symbol)
            })
    }

    componentDidMount() {
        fetch(`https://finnhub.io/api/v1/stock/symbol?exchange=US&token=${key}`)
            .then(res => res.json())
            .then(
                (results) => {
                    this.setState({
                        isLoaded: true,
                        symbol: results
                    });
                    // console.log(this.state.symbol)
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
    }


    render() {
        const { symbol, userInput } = this.state
        if (userInput === symbol) {
            return (

                symbol.map((symbol, i) => (<span className="symbol" key={i}>{symbol.displaySymbol}</span>)),
                console.log('same')
            )
        } else {
            return (
                <div className="enterstock">
                    <h1 className="title">Enter Stock Symbol</h1>
                    <form className="inputfields" onSubmit={this.getSymbol}>
                        <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
                        <button type="submit" className="btn">Send</button>
                    </form>
                </div >
            )
        }

    }
}

Answer 1

您以两种不同的方式使用symbol，它们正在发生冲突。尝试重命名 map() 函数的参数：

symbol.map((s, i) => (<span className="symbol" key={i}>{s.displaySymbol}</span>)),

symbol 不是 JavaScript 中的保留字，所以你应该很好。

Answer 2

问题在于您的 if 块。地图方法工作正常。发生的事情是您将 userInput(String) 与 symbol(an array) 进行比较，它将不起作用。我不知道你要做什么检查。但是如果是检查 userInput 是否在数组中，你就做错了。

import React from "react";
class Symbol extends React.Component {
constructor(props) {
super(props);
this.state = {
  userInput: "",
  symbol: [],
  isFiltered: false,
  isLoaded: false,
 };
}

typeSymbol = (e) => {
this.setState(
  {
    userInput: e.target.value.toUpperCase(),
  },
  () => {
    console.log(this.state.userInput);
  }
 );
};

getSymbol = (e) => {
e.preventDefault();
const filter = this.state.symbol.filter(
  (el) => el.displaySymbol === this.state.userInput
);
// console.log(filter);
this.setState(
  {
    symbol: filter,
    isFiltered: true,
  },
  () => {
    console.log(this.state.symbol);
   }
 );
};

componentDidMount() {
fetch(`https://finnhub.io/api/v1/stock/symbolexchange=US&token=${key}`)
  .then((res) => res.json())
  .then(
    (results) => {
      this.setState({
        isLoaded: true,
        symbol: results,
      });
      console.log(this.state.symbol);
      },
      (error) => {
      this.setState({
        isLoaded: true,
        error,
      });
     }
   );
  }

 render() {
 const { symbol, userInput } = this.state;
 //console.log(userInput);
 if (this.state.isFiltered) {
  return symbol.map((symbol, i) => {
    return (
      <span className="symbol" key={i}>
        {symbol.displaySymbol}
      </span>
    );
  });
} else {
  return (
    <div className="enterstock">
      <h1 className="title">Enter Stock Symbol</h1>
      <form className="inputfields" onSubmit={this.getSymbol}>
        <input
          type="text"
          className="symfields"
          name="symbolname"
          onChange={this.typeSymbol}
        ></input>
        <button type="submit" className="btn">
          Send
        </button>
      </form>
    </div>
  );
  }
 }
}
export default Symbol;