javascript - React 无法读取 null 的属性 'id'

Question

这是我想问的codesandbox -> https://codesandbox.io/s/2pwx46572n

当我单击“添加模块”按钮时，它显示“无法读取 null 的属性“id””。我相信问题出在 thematicArea.jsx 组件(组件 -> singleModuleComponent -> thematicArea.jsx)第 42 行(key={f.id})。它说在单击“添加模块”后它为空，但是当我在第 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}