javascript - 如何将 React 状态传递给另一个组件中的嵌套组件

Question

我有一个用户组件，它制作一个 API 来获取信息，然后将其存储在状态中。问题是我无法弄清楚如何将状态传递给该组件内的另一个组件<FormInputs>

所以，在调用之后，我需要让参数state: users[]能够显示在子组件的“defaultValue”属性中。我该怎么做呢？我尝试了许多不同的方法，但总是“未定义”

我也试过这个：defaultValue: `${users.email}没有骰子。也试过this.props.users.email没有骰子。提前感谢您提供可能的提示！

import axios from 'axios';

import {
  Grid,
  Row,
  Col,
  FormGroup,
  ControlLabel,
  FormControl
} from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import { UserCard } from "components/UserCard/UserCard.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

import avatar from "assets/img/faces/face-3.jpg";

class UserProfile extends Component {

  constructor(props) {
    super(props);
 
    this.state = {
      users: []
    };
  }

  componentDidMount() {
    axios.get('https://niftyAPIurlDataCall/AlltheThings')
    .then(response => {
      console.log(response.data);
      const users = response.data;
      this.setState({ users });
    })
    .catch(error => {
      console.log(error);
    });
  }

  render() {

    return (
      <div className="content">
        <Grid fluid>
          <Row>
            <Col md={8}>
              <Card
                title="Edit Profile"
                content={
                  <form>
                    <FormInputs
                      ncols={["col-md-5", "col-md-3", "col-md-4"]}
                      properties={[
                        {
                          label: "Lab (disabled)",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Lab",
                          defaultValue: "account",
                          disabled: true
                        },
                        {
                          label: "ID",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "ID",
                          defaultValue: users.id
                        },
                        {
                          label: "Email address",
                          type: "email",
                          bsClass: "form-control",
                          placeholder: "Email",
                          defaultValue: `${users.email}`
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-6", "col-md-6"]}
                      properties={[
                        {
                          label: "First name",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "First name",
                          defaultValue: `${users.first_name}`
                        },
                        {
                          label: "Last name",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Last name",
                          defaultValue: `${users.last_name}`
                        },
                        {
                          label: "User ID",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Last name",
                          defaultValue: `${users.user_id}`
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-12"]}
                      properties={[
                        {
                          label: "Group",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Group",
                          defaultValue: `${users.group}`
                        },
                        {
                          label: "Group ID",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Group ID",
                          defaultValue: `${users.group_id}`
                        },
                        ,
                        {
                          label: "Join date",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Join date",
                          defaultValue: `${users.join_date}`
                        }
                      ]}
                    />
                    <Button bsStyle="info" pullRight fill type="submit">
                      Update Profile
                    </Button>
                    <div className="clearfix" />
                  </form>
                }
              />
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default UserProfile;

标签： javascriptnode.jsreactjsjsx