Question

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）有人可以帮我吗？

Answer 1

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

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

Answer 2

您正在使用错误的setState方法。您必须运行：

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

Answer 3

请勿将{strong>等号（=）与setState方法一起使用。您可以像setState这样在组件类中调用this.setState()方法，然后传入具有键值对的对象。这就是为什么类组件状态不会改变的原因。

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

反应状态未在箭头功能中更新

3 个答案: