TypeError：无法读取未定义的属性“map”-React

Question

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

我检查了您的代码，在wrappd.js中发现了以下错误：

<Results {...results} />

因为results声明如下：

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

{...results}会以不好的方式将内容数组扩展到属性中，我建议您在这里阅读扩展操作符。

<Results results={results} />

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