Question

Props 返回 undefined

2017-06-16

144

reactjs

我正在使用 map 循环遍历对象数组以填充列表。我的循环似乎正在工作，因为我正在生成正确数量的列表，但是我无法通过 props 访问数据。似乎我的所有 props 都是未定义的。

路径： Component

function CareerPosition(props) {
  return (
    <li>
      {props.uniqueId}
  {props.companyName}
  {props.positionTitle}
    </li>
  )
}

路径： ReactPage

constructor(props) {
    super(props);

    this.state = {
      'position.uniqueId': '',
      'position.company': '',
      'position.title': '',
      data: [],
      profileCandidateCollectionId: null,
      errors: {}
    };

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const profileCandidateCollection = nextProps.profileCandidate;
    const profileCandidateCollectionId = profileCandidateCollection._id;
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;
    console.log("componentWillReceiveProps: ", careerHistoryPositions);

    if (careerHistoryPositions) {
      const newData = careerHistoryPositions.map((position) =>
      ({
        'position.uniqueId': position.uniqueId || '',
        'position.company': position.company || '',
        'position.title': position.title || ''
      }));
      this.setState({
        data: newData
      })
    }
  }

  renderCareerPositions(props) {
    if(0 < this.state.data.length) {
      const careerPositions = this.state.data.map((position) =>
        <CareerPosition
          key={position.uniqueId}
          companyName={position.company}
          positionTitle={position.positionTitle}
          uniqueId={position.uniqueId}
        />
      );
      return (
        <ul>
          {careerPositions}
        </ul>
      )
    }
  }

Answer 1

问题在于您在对象中设置键的方式：

if (careerHistoryPositions) {
  const newData = careerHistoryPositions.map((position) =>
  ({
    'position.uniqueId': position.uniqueId || '',
    'position.company': position.company || '',
    'position.title': position.title || ''
  }));
  this.setState({
    data: newData
  })
}

您正在向所有键添加额外的单词 “position” ，请删除它，否则您需要像这样访问 map 内的值：

position["position.company"]

删除位置并像这样编写：

if (careerHistoryPositions) {
    const newData = careerHistoryPositions.map((position) =>
    ({
        'uniqueId': position.uniqueId || '',
        'company': position.company || '',
        'title': position.title || ''
    }));
    this.setState({
        data: newData
    })
}

然后像这样访问地图内的值：

const careerPositions = this.state.data.map((position) =>
    <CareerPosition
       key={position.uniqueId}
       companyName={position.company}
       positionTitle={position.title}
       uniqueId={position.uniqueId}
    />
);

Answer 2

问题是在 componentWillReceiveProps 中，您正在使用键 position.title etx 设置状态，但您仅以 title 形式访问它们。>

试试这个

 componentWillReceiveProps(nextProps) {
    const profileCandidateCollection = nextProps.profileCandidate;
    const profileCandidateCollectionId = profileCandidateCollection._id;
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;
    console.log("componentWillReceiveProps: ", careerHistoryPositions);

    if (careerHistoryPositions) {
      const newData = careerHistoryPositions.map((position) =>
      ({
        'uniqueId': position.uniqueId || '',
        'company': position.company || '',
        'title': position.title || ''
      }));
      this.setState({
        data: newData
      })
    }
  } 


renderCareerPositions(props) {
    if(0 < this.state.data.length) {
      const careerPositions = this.state.data.map((position) =>
        <CareerPosition
          key={position.uniqueId}
          companyName={position.company}
          positionTitle={position.positionTitle}
          uniqueId={position.uniqueId}
        />
      );
      return (
        <ul>
          {careerPositions}
        </ul>
      )
    }
  }