Question

我正在创建一个搜索栏，用于从mongodb中搜索课程，返回课程后，每个班级都有一个按钮可供注册。如何设置从redux商店auth获取的课程ID和学生ID。我将这两个发送到后端。我将如何做到这一点。

  class CourseItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      studentID: "",
      courseID: ""
    };
    this.registerClass = this.registerClass.bind(this);
    this.handleCourse = this.handleCourse.bind(this);
  }
  componentDidMount() {
    this.setState({
      studentID: this.props.auth.user.id
    });
  }
  handleCourse = e => {
    this.setState({ courseID: e.target.value });
  };
  registerClass = e => {
    var data = {
      studentID: this.state.studentID,
      courseID: this.state.courseID
    };
    console.log("from register function", data);

    axios.post("students/registerclass", data).then(res => {
      if (res.status === 200) {
        console.log(res.data);
      }
    });
  };

  render() {
    let classesResult = null;
    if (this.props.class != null) {
      classesResult = this.props.class.map(singleClass => {
        return (
          <ul className="collection with-header" key={singleClass.id}>
            <li className="collection-item">
              <div>
                <p value={singleClass.id} onChange={this.handleCourse}>
                  {singleClass.courseID}
                  {""} {singleClass.courseName}
                </p>
                <span className="secondary-content">
                  <button
                    style={btnColor}
                    onClick={this.registerClass}
                    className="btn btn-flat"
                    type="submit"
                    name="action"
                  >
                    Enroll
                  </button>
                </span>
              </div>
            </li>
          </ul>
        );
      });

Answer 1

我认为您需要function mapStateToProps(state) { studentID = state.studentID courseID = state.courseID } export default connect(mapStateToProps)(CourseItem)才能从存储中获取状态并更新组件的本地状态。

签出：https://react-redux.js.org/using-react-redux/connect-mapstate

constructor(props) {
  super(props);
  this.state = {
    studentID: "",
    courseID: ""
  };
  this.registerClass = this.registerClass.bind(this);
  this.handleCourse = this.handleCourse.bind(this);
}
componentDidMount() {
  this.setState({
    studentID: this.props.auth.user.id
  });
}

// Added componentWillReceiveProps lifecycle method
componentWillReceiveProps(nextProps) {
  if (nextProps.studentID) {
    this.setState({
      studentID: nextProps.studentID
    });
  if (nextProps.courseID) {
    this.setState({
      courseID: nextProps.courseID
    });
  }
}
handleCourse = e => {
  this.setState({ courseID: e.target.value });
};
registerClass = e => {
  var data = {
    studentID: this.state.studentID,
    courseID: this.state.courseID
  };
  console.log("from register function", data);

  axios.post("students/registerclass", data).then(res => {
    if (res.status === 200) {
      console.log(res.data);
    }
  });
};

render() {
  let classesResult = null;
  if (this.props.class != null) {
    classesResult = this.props.class.map(singleClass => {
      return (
        <ul className="collection with-header" key={singleClass.id}>
          <li className="collection-item">
            <div>
              <p value={singleClass.id} onChange={this.handleCourse}>
                {singleClass.courseID}
                {""} {singleClass.courseName}
              </p>
              <span className="secondary-content">
                <button
                  style={btnColor}
                  onClick={this.registerClass}
                  className="btn btn-flat"
                  type="submit"
                  name="action"
                >
                  Enroll
                </button>
              </span>
            </div>
          </li>
        </ul>
      );
    });


  // ADDED mapStateToProps()
  const mapStateToProps = state => ({
    profileID: state.profileID,
    courseID: state.courseID
  });

  export default connect(mapStateToProps)(CourseItem)

然后您可以在组件中使用studentID和courseID作为道具。

例如：

<html>
<head>
<body>    
<table> 
<tr> 
<th>Id</th>  
<th>String</th>  
<th>Array</th> 
</tr> 

<?php
// Mostrar dados
echo "<table>";
{
$databaseName = 'visteon';

$pdo = new Pdo('mysql:host=127.0.0.1;dbname=' . $databaseName, 'root', '');

$result = $pdo->query('SHOW TABLES FROM ' . $databaseName)->fetchAll(PDO::FETCH_NUM);

$Tabela = [];
foreach ($result as $r) {
$Tabela[] = $r[0];
}

$data = [];
foreach ($Tabela as $Tabela) {
$data[$Tabela] = $pdo->query('SELECT * FROM ' . $Tabela)->fetchAll(PDO::FETCH_ASSOC);
}
echo "</table>";
var_dump($Tabela);
var_dump($data);

}
?>
</table>
</body>
</html>

如何从动态创建的div中设置状态

1 个答案: