Question

我有一个带有select和button的组件（React），该组件打开带输入的模态窗口。当我在模式窗口中单击“保存”按钮时，我将输入中的数据添加到数据库（使用访存）并关闭模式窗口。

我需要关闭模态窗口后在select中显示新数据。但是现在只有重新加载页面后才显示。如何解决？

可提取的组件：

while

具有选择的组件：

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      event: []
      }
    };   
  } 

  onHandleEventFetch() {
    fetch(`${Config.baseUrl}/event`, {
      method: 'GET'
    })
            .then((response) => {
              if (response.status >= 400) {
                throw new Error('Bad response from server');
              }
              return response.json();
            })
            .then(data =>
                this.setState({ event: data })
            );
  }

render() {
    return (
      ...
              <InputTypeEvent event={this.props.event}
          onhandleEventFetch={this.props.onhandleEventFetch}
        />
            ...
    );
  }
}

模式窗口中的组件：

class InputTypeEvent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false
    };    
  }

  componentWillMount() {
    Modal.setAppElement('body');
  }  

  handleOpenModal() {
    this.setState({ modalIsOpen: true });
  }

  onHandleCloseModal() {
    this.props.onhandleEventFetch();
    this.setState({ modalIsOpen: false });
  }

  render() {
    return (
      <div>
        <Modal
          isOpen={this.state.modalIsOpen}
          contentLabel='Example Modal'
          style={customStyles}
        >
          <EventPage onhandleCloseModal={this.onHandleCloseModal}/>
        </Modal>       
        <select>          
          {this.props.event.map(item => {
            return (<InputTypeEventSelect key={item.id} directory={item}/>); // options are here
          })}
        </select>       
      </div>
    );
  }
}

我的代码可以在Firefox上运行，但不能在Chrome浏览器上

Answer 1

您需要将onHandleEventFetch绑定到this的{{1}}上下文。由于MainPage在js中的工作方式，this将this.setState({ event: data })添加到event而不是InputTypeEvent's state中。

做

MainPage's state

在

   this.onHandleEventFetch = this.onHandleEventFetch.bind(this)

组件的构造函数中，

将确保在正确的componenet上调用MainPage。

考虑这样做

this.setState({ event: data })

关闭模态窗口后如何更新下拉列表中的数据

1 个答案: