JSX 不使用 React 返回 map 函数

Question

我已经在这个问题上工作了很长一段时间，但我不知道如何继续前进。当在输入字段中输入特定代码时，我正在尝试 return 对股票的描述。 console.log return 是输入符号时描述的值，但不会将其呈现到页面。我已经尝试 return 整个语句，包括 map 函数，但这只是取消了我的其他 return 语句。我不知道还能做什么。有人能指出我正确的方向吗？

这是我的代码：

render() {
        const { stockSymbol, userInput } = this.state




        stockSymbol.map((stock, i) => {

            if (userInput === stock.symbol) {

                return <h2 className="symboldescription" key={i}>
                    {stock.description}
                </h2>,

                    console.log(stock.description + " match")

            }
        })

        return (
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <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

您应该将其作为 render 方法的 return 语句的一部分。例如，

render() {
  const { stockSymbol, userInput } = this.state;

  return (
    <div className="enterstock">
      <h1 className="title">Enter Stock Symbol</h1>
      <span className="symbol">{this.state.userInput}</span>
      <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>
      {stockSymbol.map((stock, i) => {
        if (userInput === stock.symbol) {
          return <h2 className="symboldescription" key={i}>
            {stock.description}
          </h2>
        }
      })}
    </div>
  )
}

Answer 2

您的地图 return 未分配给变量。您可以分配给一个变量，然后在您的 return 组件中使用。像这样：

let description =         stockSymbol.map((stock, i) => {

           if (userInput === stock.symbol) {

               return <h2 className="symboldescription" key={i}>
                   {stock.description}
               </h2>,

                   console.log(stock.description + " match")

           }
       })

然后在组件

的return中使用

        return (
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <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>
                {description}
            </div >
        )

JSX 不使用 React 返回 map 函数

JSX not returning map function with React

javascript

arrays

reactjs

map-function