Question

这是我要询问的密码和框-> https://codesandbox.io/s/2pwx46572n

当我单击“添加模块”按钮时，它说“无法读取null的属性'id'”。我相信问题出在第42行（key = {f.id}）中的thematicArea.jsx组件（组件-> singleModuleComponent-> thematicArea.jsx）中。它说单击“添加模块”后为空，但是当我在第32行进行console.log记录时，它似乎并不为空。那么...可能是什么问题？有人可以帮我解决这个问题吗？

thematicArea.jsx代码下方：

import React, { Component } from "react";
import SingleModule from "./singleModule";
import { Row } from "react-bootstrap";
import _ from "lodash";

class ThematicArea extends Component {
  constructor(props) {
    super(props);
    this.takeModuleNameFromSingleModule = this.takeModuleNameFromSingleModule.bind(
      this
    );
  }
  takeModuleNameFromSingleModule(value) {
    this.props.moveModuleNameUpToApp(value);
  }

  orderedModules = _.groupBy(this.props.modules, thematicArea => {
    return thematicArea.thematicArea;
  });

  render() {
    console.log(this.orderedModules);
    console.log(this.props);
    return (
      <Row>
        <div>
          {
            (this.orderedModules = Object.keys(this.orderedModules).map(e => {
              return (
                <div key={e}>
                  <h3 key={e}>{e}</h3>
                  {/*console.log(
                    Object.values(this.orderedModules[e]).map(f => f.name + f.id)
                  )*/}
                  {Object.values(this.orderedModules[e]).map(f => (
                    <SingleModule
                      moveModuleNameUpToThematicArea={
                        this.takeModuleNameFromSingleModule
                      }
                      clickedModuleNames={this.props.clickedModuleNames}
                      chosenModulesNames={this.props.chosenModulesNames}
                      key={f.id}
                      {...f}
                    />
                  ))}
                </div>
              );
            }))
          }
        </div>
      </Row>
    );
  }
}

export default ThematicArea;

singleModule.jsx（此处显示模块）

import React, { Component } from "react";
import ShowModuleDetails from "./showModuleDetails";
import AddModule from "./addModule";
import { Col } from "react-bootstrap";

class SingleModule extends Component {
  constructor(props) {
    super(props);
    this.takeModuleNameFromAddModule = this.takeModuleNameFromAddModule.bind(
      this
    );
  }
  takeModuleNameFromAddModule(value) {
    this.props.moveModuleNameUpToThematicArea(value);
  }

  render() {
    return (
      <Col
        xs={12}
        md={6}
        lg={3}
        className={
          this.props.chosenModulesNames.includes(this.props.name) === true
            ? /*"single-module col-12 col-md-6 col-lg-3 col-xl-2*/ "single-module single-module--added"
            : /*'single-module col-12 col-md-6 col-lg-3 col-xl-2*/ "single-module single-module--not-added"
        }
      >
        <h4 className="sindgle-module__thematic-area-display">
          {this.props.thematicArea}
        </h4>
        <h3 className="single-module__module-name-display">
          {this.props.name}
        </h3>
        <div className="single-module__buttons">
          <ShowModuleDetails
            details={this.props.details}
            name={this.props.name}
          />

          <AddModule
            moveModuleNameUpToSingleModule={this.takeModuleNameFromAddModule}
            isAdded={this.isAdded}
            addNewModuleToList={this.handleAddNewModuleToList}
            name={this.props.name}
            clickedModuleNames={this.props.clickedModuleNames}
            chosenModulesNames={this.props.chosenModulesNames}
          />
        </div>
      </Col>
    );
  }
}

export default SingleModule;

和addModule.jsx（显示添加模块后发生的情况）

import React, { Component } from "react";
import { Button } from "react-bootstrap";

class AddModule extends Component {
  constructor(props) {
    super(props);
    this.handleAddModuleToList = this.handleAddModuleToList.bind(this);
  }

  handleAddModuleToList() {
    this.props.moveModuleNameUpToSingleModule(this.props.name);
  }

  isButtonDisabled = (chosenModulesNames, name) =>
    chosenModulesNames.includes(name);

  render() {
    const { chosenModulesNames, name } = this.props;
    return (
      <div>
        <Button
          disabled={
            this.props.chosenModulesNames.length === 122
              ? true
              : this.isButtonDisabled(chosenModulesNames, name)
          }
          bsStyle="primary"
          onClick={this.handleAddModuleToList}
          className={
            this.isButtonDisabled(chosenModulesNames, name) === true
              ? "single-module__buttons--chosen"
              : "single-module__buttons--not-chosen"
          }
        >
          {this.isButtonDisabled(chosenModulesNames, name) === true
            ? "Dodano!"
            : "Dodaj moduł"}
        </Button>
      </div>
    );
  }
}

export default AddModule;

Answer 1

验证this.orderedModules时是否呈现数据，如下所示：

this.orderedModules && Object.keys(this.orderedModules).map(e => {

如果在当前代码中一切正常，那么您也可以使用：

key={f && f.id}

React无法读取null的属性“ id”

1 个答案: