小编Nic*_*tto的帖子

我正在将道具从一个无状态函数传递到另一个无状态函数，并且收到一个引用错误，指出该道具未定义。这是父函数：

const Home = () => {
  return (
    <App>
      <BackgroundImage url="mercedes-car.jpg">
        <h1>Test</h1>
      </BackgroundImage>
    </App>
  )
}

这是BackgroundImage函数：

const Image = styled.div`
  background-image: ${props => url(props.imageUrl)};
  background-size: cover;
  height: 100%;
  width: 100%;
`;

const BackgroundImage = (props) => {
    console.log(props)
  return (
    <Image imageUrl={ props.url }>
      { props.children }
    </Image>
  )
}

错误是网址未定义；但是，当我console.log（props）时，我得到一个带有url和子级的对象。为什么会引发此错误的任何方向或解释将不胜感激！

这是该类的未完成版本,但类Typehead的完成版本应打印出与输入匹配的道具中的选项列表 - 基本上是自动完成功能.我遇到的问题是当我调用handleChange方法时,出现错误"无法读取属性'未定义的setState'".这是代码:

import React from 'react'

export default class Typehead extends React.Component {
  constructor() {
    super()
    this.state = {}
  }

  handleChange(e) {
    this.setState(previousState => {
      previousState = e.target.value
      return {previousState}
    })
    console.log(this.state)
  }

  render() {
    return (
      <form>
        <div className="input-group">
          <label>
            Choose a Track:
            <input onChange={this.handleChange} type="text" 
            className="form-control" placeholder="Song Name"/>
          </label>
        </div>
      </form>
    )
  }
}

任何关于为什么'this'在handleChange中未定义的解释将不胜感激!