Question

我正在处理一个要向用户返回数据的搜索字段，但收到错误消息：TypeError：无法读取未定义的属性“地图”。我似乎无法找出地图未定义的原因，

这是我的代码：code sandbox

我尝试从 j-fiddle（下面的代码）中提取示例代码并将其转换为功能组件。这是我试图从 j-fiddle 操作的代码

class Wrapped extends React.Component {
    constructor(props){
    super(props)
    this.state = {
        results: []
    }
    
    this.search = this.search.bind(this)
  }
  search(results){
    this.setState({results})
  }
    render(){
    const { results } = this.state
    return (
        <div>
          <Search onSearch={this.search} />
        <Result {...this.state} />
        </div>
    )
  }
}

class Search extends React.Component {
    constructor(props){
    super(props);
    this.state = {
        searchValue: ''
    }
    this.handleOnChange = this.handleOnChange.bind(this);
  }
  
  handleOnChange(e){
    this.setState({
        [e.target.name]: e.target.value
    }, () => {
        setTimeout(() => {
        // it can be the result from your API i just harcoded it
        const results = ['hello', 'world', 'from', 'SO'].filter(value => value === this.state.searchValue)
        this.props.onSearch(results)
      }, 1000)
    })  
  }
  
    render(){
    return (
        <div>
          Search: <input name="searchValue" type="text" onChange={this.handleOnChange} />
        </div>
    )
  }
}

const Result = ({results}) => {
    return (
  <ul>
    {results.map(result => <li key={result}>{result}</li>)}
  </ul>
  )
}

ReactDOM.render(
  <Wrapped/>,
  document.getElementById('container')
);

Answer 1

我在检查您的代码时发现 Wrapped.js 中存在以下错误：

<Results {...results} />

由于 results 声明如下：

const [results, setResults] = useState([]);

{...results} 会将内容数组以不好的方式传播到属性中，我建议您阅读有关 Spread Operator here 的内容。

为了修复您的错误，您可以执行以下解决方案之一：

简单的解决方案

<Results results={results} />

扩展运算符解决方案

...
const resultsProps = {
    results,
  }
...
  return (
    <>
      <SearchComp onSearch={search} />
      <Results {...resultsProps} />
    </>
  );
...

希望这对您有用，请让我知道并记得阅读有关 Spread Operator 的内容，它在 .JS 中是一个非常有用的函数。

类型错误：无法读取未定义的属性“地图”-反应

1 个答案: