箭头函数中未更新反应状态答案

【问题标题】：React State not updated in arrow function箭头函数中未更新反应状态
【发布时间】：2020-01-03 04:38:33
【问题描述】：

React passing parameter with arrow function in child component

通过该反馈，我可以了解更新状态的情况。

但是，尽管代码看起来完全相同，但我的代码似乎无法正常工作。

  constructor(props) {
    super(props);
    
    // this.state = {
    //   selectedId: 0
    // }
    this.state = {
      selectedId: 0
    }
  }
  
handleClick = (id) => {

  // const { name, value } = event.target;
  console.log(id);
  this.setState = ({
    selectedId: id
  })
}

  render () {
    //const { isEditClicked } = this.state;
    const { selectedId } = this.state;
  return (
    <div className='admin-match-item'>
{selectedId}

          <CustomIconButton type='edit' id={this.props.id} handleClick={this.handleClick} />
    </div>
  );
  }
}

子组件如下所示

//Need refactoring
const CustomIconButton = ({ type, id, handleClick, ...otherProps }) => (
   <div>
      hi{id}
   <button className='button-icon' onClick={() => handleClick(id)}>
      {
         type == 'add' ? <AddIcon className='icon' /> :
         type == 'save' ? <SaveIcon className='icon'/> :
         type == 'edit' ? <EditIcon className='icon' /> :
         type == 'delete' ? <DeleteIcon className='icon' /> : 
         <ErrorIcon className='icon' /> 
      }
   </button></div>
)

export default CustomIconButton;

我将 props.id 传递给子组件，并使用我单击的 id 更新状态。 console.log 里面的东西正在返回我想要的值，但它不会更新 selectedId 状态（始终为 0）谁能帮我解决这个问题？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将您的代码更改为this.setState({selectedId: id})

handleClick = (id) => {
  // const { name, value } = event.target;
  console.log(id);
  this.setState({selectedId: id})
}

【讨论】：

【解决方案2】：

你使用了错误的 setState 方法。你必须运行：

 `handleClick = (id) => {
    // const { name, value } = event.target;
    console.log(id);
    this.setState({ selectedId: id })
 }`

【讨论】：

这没有什么不同，因为这是纠正这个答案的唯一方法，这就是我分享的原因，我是 StackOverFlow 的新手，但我是 MERN 堆栈开发人员并试图帮助他人
欢迎来到 SO！复制其他答案的内容并不受欢迎。如果你觉得一个答案已经很好，你应该upvote it (when you'll have 15 reputation points)。
查看help center 以找到有关 Stack Overflow 问题的答案。我在之前的评论中链接了 Vote up 特权，该特权在 15 点声望点解锁。同时，您可以建议对现有问题和答案进行修改，获得批准后奖励 2 分。您还可以提出问题并回答其他问题，前提是您的答案是相关的，并为主题带来了新的东西，或者另一个答案可能缺少的更好的解释。
好的。谢谢。我会照顾的

【解决方案3】：

不要在 setState 方法中使用 等号 (=)。您在组件类中调用setState 方法，就像this.setState() 一样，然后传入一个带有键值对的对象。这就是类组件状态不会改变的原因。

handleClick = (id) => {
    this.setState({
        selectedId: id
    })
}

【讨论】：