如何使用array.prototype.map()将二维数组传递给array.prototype.map()

Question

下面的2D数组timeArray处于React中父组件的状态。我在render()函数中使用它，如下所示：

render() {
  return (
    <div><Manager data={this.state.timeArray} /></div>
  );
}

在我的Manager组件的render()函数中，我使用以下内容：

render() {
  return (
    <div>
      {this.props.data.map((weekId, i) => (
        <Week key={i} weekData={weekId} />
      ))}
    </div>
  );
}

当我将weekData传递给Week时，我期望它是一个数组，因为来自父组件的timeArray是一个2D数组。然而，当我在console.log(this.props.weekData)中使用Week的render()函数时，我得到的是undefined，而不是数组中的实际数据。

编辑:每个请求的，以下是大部分源代码：

应用程序

// preceded by various imports
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeArray = []
    }
  }
  handleNewClick() {
    let tempWeek = this.getInput();
    let tempArr = this.state.timeArray.slice(0);
    console.log(tempArr); // logs []
    tempArr.push(tempWeek);
    console.log(tempArr); // logs [1, 1, 1, 1]
    this.setState({ timeArray: tempArr });
  }
  getInput() { // unimplemented, returning expected values for testing
    return [1, 1, 1, 1]
  }
  render() {
    return (
      <div>
        <Manager weeksData={this.state.timeArray} />
        <button onClick={this.handleNewClick.bind(this)}>
          Add Week
        </button
      </div>
    );
  }
}
export default App;

管理器

//various imports
class Manager extends React.Component {
  render() {
    console.log(this.props.weeksData);
    // ^^ logs [1,1,1,1] for each button press, e.g.
    // 1 button press: [[1,1,1,1]]
    // 2 button presses: [[1,1,1,1],[1,1,1,1]] and so on
    return (
      <div>
        {this.props.weeksData.map((weekId, i) => (
          <Week key={i} data={weekId} />
        ))}
      </div>
    );
  }
}
export default Manager;

Week

// various imports
class Week extends React.Components {
  render() {
    let weekData = this.props.weekId;
    console.log(weekData); // logs undefined, which is not as expected
    render() { // unimplemented
      return <div></div>;
    }
  }
}
export default Week;

所有代码都在Container组件中使用和呈现，即：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

class Container extends React.Components {
  render() {
    return (
      <div>
        <App />
      </div>
    );
  }
}

ReactDOM.render(
  <Container />,
  document.getElementById('react')
);

Answer 1

首先，您的代码中有很多类型的输入，我在下面的解决方案中对它们进行了修正。

因此，这里的主要问题是您正在尝试访问不存在的道具。当您将data传递给周组件(data={weekId})时，道具data将存在于Week组件中，而不是 weekId属性。因此，如果您访问this.props.data而不是this.props.weekId，您将得到数据。

​

// preceded by various imports
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeArray : []
    };
  }
  handleNewClick() {
    let tempWeek = this.getInput();
    let tempArr = this.state.timeArray.slice(0);
    console.log(tempArr); // logs []
    tempArr.push(tempWeek);
    console.log(tempArr); // logs [1, 1, 1, 1]
    this.setState({ timeArray: tempArr });
  }
  getInput() { // unimplemented, returning expected values for testing
    return [1, 1, 1, 1]
  }
  render() {
    return (
      <div>
        <Manager weeksData={this.state.timeArray} />
        <button onClick={this.handleNewClick.bind(this)}>
          Add Week
        </button>
      </div>
    );
  }
}

// various imports
class Manager extends React.Component {
  render() {
    return (
      <div>
        {this.props.weeksData.map((weekId, i) => (
          <Week key={i} data={weekId} />
        ))}
      </div>
    );
  }
}

// various imports
class Week extends React.Component {
  render() {
    let weekData = this.props.weekId;
    console.log(weekData); // logs undefined, which is not as expected
    console.log(this.props.data); // logs the data as expected
    return <div>unimplemented component</div>;
    
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

​

Answer 2

在您尚未发布的代码中，配置timeArray变量的方式出现了错误。这对我来说很好。

class ManagerContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { timeArray: [
    {id: 1}, {id: 2}, {id: 3}
    ]}
  }
  render() {
    return (
      <div><Manager data={this.state.timeArray} /></div>
    );
  }
}

class Manager extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        {this.props.data.map((week, i) => (
          <Week key={i} weekData={week} />
        ))}
      </div>
    );
  }
}


class Week extends React.Component {
  render() {
    return (
      <p>week number: {this.props.weekData.id}</p>
    )
  }
}
ReactDOM.render(<ManagerContainer />, document.getElementById('app'))

在jsbin上