javascript - 'state' 未定义 no-undef

Question

我真的很陌生，但我只想为我在“输入”栏中输入的每个状态呈现“学院”组件。我收到上述错误。我过滤渲染部分是否错误？感谢您帮助新手:)

import College from './College';

const Home = (props) => {

  const [colleges, setColleges] = useState([
    {name: 'Princeton', price: 1100.00, img: Princeton, tag: 'princeton'},
    {name: 'Stanford', price: 1100.00, img: Stanford, tag: 'stanford'},
    {name: 'Brown', price: 1100.00, img: Brown, tag: 'brown'},
    {name: 'Columbia', price: 1100.00, img: Columbia, tag: 'columbia'},
    {name: 'Wake', price: 1100.00, img: Wake, tag: 'wake'},
    {name: 'Ross', price: 1100.00, img: Ross, tag: 'ross'},
  ])
   const [search, setSearch] = useState('')
   const renderColleges = (colleges) => (colleges.map(colleges => <College {...colleges} />))

  return (

    <div>

      <Row align="middle" className='title'>
        <Input placeholder="Search for a school" onChange={(e) => setSearch(e.target.value)} value={search}/>
      </Row>

      <Row align="middle" className='container'>
        {renderColleges(state.colleges.filter(search))}
      </Row>

    </div>
  );
}

export default Home;

标签： javascriptreactjs

Answer 1

当你使用类时，你有一个对象state并且colleagues显然会在其中。

但是当你使用 useState 钩子时，colleagues它本身就是 state 属性并且setColleagues是它的 setter (setState)，你不需要写state.colleagues，只需使用colleagues.

所以你需要使用{renderColleges(colleges.filter(search))}. 但是您在过滤方面也有问题。它应该是这样的。{renderColleges(state.colleges.filter(c => c.name.includes(search))}