Question

我的app.js创建了一个小部件布局，其中有一个handleWidgetSelection函数，当在我的模式组件中单击某个项目时，该函数应该带有一个id。当我在handleWidgetSelection函数中进行控制台登录时，我注意到状态未更新，并且按照我最初将状态设置为null的状态。我是新来的反应者，所以任何帮助都会很棒。

这是我的app.js

class App extends Component {
constructor(props) {
    super(props);
    this.state={
    selectedWidgetId: null, //initially set as null because no widget is selected
    widgetOptions:[{name:"Data Table", comp:<DataTable/>},{name:"List", comp:<CheckboxList/>}],

    widgets:[ //array for layout 
        {id:1, content: <DataTable/>},
        {id:2, content: <CheckboxList/>},
        {id:3, content: ""},
        {id:4, content: ""}
    ],
     isModalOpen: false
    }

}
handleWidgetSelection=(id) => {

    this.setState({selectedWidgetId: id})
    console.log(this.state.selectedWidgetId); //trying to fix so this value does not always print null
}
.....

render() {
    const { classes } = this.props;

    return (

    <div className={classes.root}>
    //I am passing my values to the AddWidgetDialog component here

    <AddWidgetDialog handleWidgetSelection={this.handleWidgetSelection} widgets={this.state.widgetOptions} isModalOpen={this.state.isModalOpen} onRequestClose={this.onRequestClose} />
    <Grid container spacing={24}>
        {
            this.state.widgets.map((widget,index)=>{
                return(
                    <Grid item xs={12} sm={6}>
                        <Paper className={classes.paper}><Swappable id={widget.id} content={widget.content} delete={this.deleteEvent.bind(this,index)} add={this.addEvent.bind(this,index)}/></Paper>
                        </Grid>
                )
            })
        }
    </Grid>
    </div>
    );
}

这是我的AddWidgetDialog组件

import React, { PropTypes } from 'react';
import Modal from 'react-modal';

const AddWidgetDialog = ({ handleWidgetSelection, widgets, isModalOpen, onRequestClose}) => {
  const widgetItems = widgets.map((widget) => {
    return (
      <div className="list-group">
      <a href="#" onClick={() => handleWidgetSelection(widget.name)} className="list-group-item">
          <h6 className="list-group-item-heading">{widget.name}</h6>
        </a>
      </div>
    );
  });
  return (
    <Modal
      className="Modal__Bootstrap modal-dialog"
      isOpen={isModalOpen}>
      <div className="modal-content">
       <div className="modal-header">
         <button type="button" className="close" onClick={onRequestClose}>
           <span aria-hidden="true">&times;</span>
           <span className="sr-only">Close</span>
         </button>
         <h4 className="modal-title">Add a widget</h4>
       </div>
       <div className="modal-body">
         <h5>Pick a widget to add</h5>
         {widgetItems}
       </div>
       <div className="modal-footer">
         <button type="button" className="btn btn-default" onClick={onRequestClose}>Close</button>
       </div>
      </div>
    </Modal>
  );
};

export default AddWidgetDialog;

Answer 1

setState可能是异步的。参见文档Why is setState giving me the wrong value?

handleWidgetSelection=(id) => {
    this.setState({selectedWidgetId: id})
    console.log(this.state.selectedWidgetId); //no guarantee state is updated or not.
}

您应在回调中使用console.log()作为setState的第二个参数

handleWidgetSelection=(id) => {
    this.setState({selectedWidgetId: id},() => {
        console.log(this.state.selectedWidgetId); //state is updated now.
    })
}

我正在尝试将具有点击功能的一个组件的值传递给另一个组件

1 个答案: