Question

我在网站上有一个主屏幕/页面，其中有很多具有添加/编辑操作功能的表格。在编辑过程中，我看到了在进行api调用以及数据来自api之后的问题我必须在模式弹出窗口中将数据预先填充到其各自的表单字段中。但是我面临的问题是，如何在模式打开之前使用来自父组件的道具来设置子组件状态的状态，以便可以在模式中看到数据模态，也可以编辑。我很困惑，应该在哪里设置setState？（我曾尝试过onOpened的模态行为，但是setState不同步，所以我遇到了一些问题，应该在componentDidMount还是在哪里进行？）这是我工作的链接。 https://codesandbox.io/s/mj6ww6m718?fontsize=14

父组件

    import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import ModalComponent from "./modal";
    import "bootstrap/dist/css/bootstrap.min.css";

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          openModal: false,
          name: ""
        };
      }

      toggleModal = () => {
        this.setState({ openModal: !this.state.openModal });
      };

      render() {
        console.log("render from index");
        return (
          <div>
            <button onClick={this.toggleModal}>Open Modal</button>
            <ModalComponent
              openModal={this.state.openModal}
              toggleModal={this.toggleModal}
              name={this.state.name}
            />
          </div>
        );
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

子组件

    import React, { Component } from "react";
    import {Modal,ModalHeader,ModalBody,FormGroup,Input,Col,Label} 
       from "reactstrap";

    class ModalComponent extends Component {
      constructor(props) {
        super(props);
        this.state = {
          name: ""
        };
      }

      handleInput = e => {
        const { name, value } = e.target;
        this.setState({ [name]: value });
      };

      render() {
        console.log("render from modal");
        return (
          <div>
            <Modal
              isOpen={this.props.openModal}
              onOpened={this.onModalOpened}
              toggle={this.props.toggleModal}
            >
              <ModalHeader toggle={this.props.toggleModal}>Header</ModalHeader>
              <ModalBody>
                <FormGroup row>
                  <Label col-8>Name from Parent state after api call</Label>
                  <Col col-4>
                    <Input
                      type="text"
                      name="name"
                      value={this.state.name}
                      onChange={this.handleInput}
                    />
                  </Col>
                </FormGroup>
              </ModalBody>
            </Modal>
          </div>
        );
      }
    }

    export default ModalComponent;

Answer 1

在子组件中，您将拥有

Error: No previously deleted formula found. Error: No similarly named formulae found.

但是在较新版本的React中，它将被temp_token = ['(', '(', '(', '(', 4.0, '+', 3.0, ')', ')', ')', '+', 7.0, ')', '+', '(', 2.0, '+', 9.0, ')'] stack = [] for n in range(0,len(temp_token)): if temp_token[n] == "(": stack.append(n) if temp_token[n] == ")": print(stack.pop()) # break if just do it once取代，您可以了解有关getDerivedStateFromProps here的更多信息

来自子组件中父组件的props值在何处设置状态？

1 个答案: