Reactjs 未捕获类型错误：props.handleRemoveOption不是函数

我正在使用react应用程序，特别是使用我的

HandlerRemoveOption

功能一次删除一个项目：

  handleRemoveOption(optionToRemove){
    this.setState((prevState) => ({
        options: prevState.options.filter((option) => optionToRemove !== option)
      }));
  }

以下是我的完整代码：

class Box extends React.Component{
  constructor(props){
      super(props);
      this.state = {
          options: ['one', 'two', 'three']
      }
      this.handleRemoveAllOptions = this.handleRemoveAllOptions.bind(this);
      this.handleDecision = this.handleDecision.bind(this);
      this.handleAddOption = this.handleAddOption.bind(this);
      this.handleRemoveOption = this.handleRemoveOption(this);
  }
  handleRemoveAllOptions(){
      this.setState({
          options: []
      });
  }

  handleDecision(){
      const randomNum = Math.floor(Math.random() * this.state.options.length);
      const option = this.state.options[randomNum];
      alert(option);
  }

  handleAddOption(option){
      this.setState((prevState) => ({
          options: prevState.options.concat(option)
      }));
  }

  handleRemoveOption(optionToRemove){
    this.setState((prevState) => ({
        options: prevState.options.filter((option) => optionToRemove !== option)
      }));
  }

  render(){
    const title = 'Indecision app';
    const subtitle = 'Put your life..';
      return(
          <div>
             <Header 
               title={title} 
               subtitle={subtitle} 
             />
             <Action 
               handleDecision={this.handleDecision}
               hasOptions={this.state.options.length === 0}
             />
             <Options 
               options={this.state.options} 
               hasOptions={this.state.options.length === 0}
               handleRemoveAllOptions={this.handleRemoveAllOptions}
               handleRemoveOption={this.handleRemoveOption}
            />
             <AddOption handleAddOption={this.handleAddOption} />
          </div>
      );
  }
}

const Header = (props) => {
    return(
        <div>
            <h1>{props.title}</h1>
            <h3>{props.subtitle}</h3>
        </div>
    );
};


const Action = (props) => {
  return(
     <div>
        <button 
          onClick={props.handleDecision}
          disabled={props.hasOptions}>
          Decide for me
        </button>
     </div>
  );
};

const Options = (props) => {
    return(
      <div>
          <button 
            onClick={props.handleRemoveAllOptions}
            disabled={props.hasOptions}>
            Remove All
          </button>
         <ol>
            { props.options.map((option) => (
              <Option 
                key={option} 
                optionText={option}
                handleRemoveOption={props.handleRemoveOption}
            /> 
            ))
            }
        </ol>
      </div>
    );
};

const Option = (props) => {
    return (
        <div>
                <li>
                    <span>{ props.optionText }</span>
                    <button 
                      onClick={(e) => {
                        props.handleRemoveOption(props.optionText);
                      }}>
                      Remove Option
                    </button>
                </li>
        </div>
    );
};

class AddOption extends React.Component{
   constructor(props){
       super(props);
       this.handleAddOption = this.handleAddOption.bind(this);
   }

    handleAddOption(e){
        e.preventDefault();
        const option = e.target.option.value.trim();
        this.props.handleAddOption(option);
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleAddOption}>
                    <input type="text" name="option" />
                    <button>Add Option</button>
                </form>
            </div>
        );
    }
}


ReactDOM.render(<Box />, document.getElementById('app'))

类框扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选项：[‘一’、‘二’、‘三’]
}
this.handleRemoveAllOptions=this.handleRemoveAllOptions.bind（this）；
this.handleDecision=this.handleDecision.bind（this）；
this.handleAddOption=this.handleAddOption.bind（this）；
this.handleremovepoption=this.handleremovepoption（this）；
}
HandlerRemoveAlloptions（）{
这是我的国家({
选项：[]
});
}
处理决定{
const randomNum=Math.floor（Math.random（）*this.state.options.length）；
const option=this.state.options[randomNum]；
警报（选项）；
}
handleAddOption（选件）{
this.setState（（prevState）=>({
选项：prevState.options.concat（选项）
}));
}
手柄拆卸选件（选件拆卸）{
this.setState（（prevState）=>({
选项：prevState.options.filter（（选项）=>optionToRemove！==option）
}));
}
render（）{
const title=‘优柔寡断应用程序’；
const subtitle='投入你的生命..'；
返回(
);
}
}
常数头=（道具）=>{
返回(
{props.title}
{props.subtitle}
);
};
常量动作=（道具）=>{
返回(
替我决定
);
};
常量选项=（道具）=>{
返回(
全部删除
{props.options.map（（option）=>(
))
}
);
};
常量选项=（道具）=>{
返回(

{props.optionText}
{
props.handleRemoveOption（props.optionText）；
}}>
删除选项

);
};
类AddOption扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleAddOption=this.handleAddOption.bind（this）；
}
手引线掺杂（e）{
e、 预防默认值（）；
const option=e.target.option.value.trim（）；
此.props.handleAddOption（选项）；
}
render（）{
返回(
添加选项
);
}
}
ReactDOM.render（，document.getElementById（'app'））

当我点击每个项目的单个按钮时，它总是说

uncaughttypeerror:props.handleremovepoption不是一个函数

---

我在这里做错了什么？

在

框的
构造函数中，所有函数都绑定到
此
，但
HandlerRemoveOption
不绑定

请注意缺少的
this.handleremove选项。**bind**（this）

编辑第13行至

    this.handleRemoveOption = this.handleRemoveOption.bind(this);

会解决你的问题
 在
框
组件的
构造函数
中，所有函数都绑定到
此
，但
HandlerRemoveOption
不绑定

请注意缺少的
this.handleremove选项。**bind**（this）

编辑第13行至

    this.handleRemoveOption = this.handleRemoveOption.bind(this);

会解决你的问题