无法在反应功能组件中的道具上设置状态

Question

我一直无法在我不断得到的道具上设置状态TypeError：props.setState 不是函数我正在尝试实现搜索功能const HeroComp = (props) => {        let  handleSearchSubmit = (e) => {          props.setState({searchValue: e.target.value});      }      return     <div className='heroComp' >                <form action="" >                   <input type="text" placeholder='search cartigory'  onChange={handleSearchSubmit}   />                 </form>            </div>}export default HeroComp;当我 console.log(props) 我得到{searchValue: ""}searchValue: ""__proto__: Object这是父组件import images from '../data/images'; //the file from which i'm importing images dataclass HomePage extends React.Component{    constructor(){        super();        this.state = {            images,            searchValue: ''            }}    render(){        const {images , searchValue} = this.state;        const filteredImage = images.filter(image => image.cartigory.toLowerCase().includes(searchValue));            return(                <div >                    <HeroComp searchValue={ searchValue }  />                    <GalleryComp filteredImage={filteredImage} />                </div>            )        }}export default HomePage;我知道这应该很容易，但我只是看不到解决方案。

Answer 1

这个怎么样？

  useEffect(() => {

    // set the current state

    setSearchValue(props.searchValue)

  }, [props]);

Answer 2

功能组件没有状态，但你可以使用 reactHooks：

import React, { useState } from 'react';

const HeroComp = (props) => {

      let [searchValue, setSearchValue] = useState();

      let  handleSearchSubmit = (e) => {

          setSearchValue(e.target.value);

      }

      return     <div className='heroComp' >

                <form action="" >

                <input type="text" placeholder='search cartigory'  onChange={handleSearchSubmit}   />

                 </form>

            </div>

}

export default HeroComp;