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 data

class 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

功能组件没有状态，但是您可以使用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;

Answer 2

怎么样？

  useEffect(() => {
    // set the current state
    setSearchValue(props.searchValue)
  }, [props]);

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

2 个答案: