Javascript 如何使用React.js将2D数组传递到array.prototype.map（）中

以下2D数组

timeArray

处于React中父组件的状态。我在

render（）

函数中使用它，如下所示：

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

当我将

weekData

传递到

Week

时，我希望它是一个数组，因为来自父组件的

timeArray

是一个2D数组。但是，当我在

Week

的

render（）

函数中使用

console.log（this.props.weekData）

时，我得到的是

未定义的

，而不是数组中的实际数据。通过这个考试的最好方法是什么

编辑：每个请求，以下是大部分来源：

应用程序

// 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;

---

在您尚未发布的代码中，您如何配置

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'))

类管理器容器扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={timeArray:[
{id:1}，{id:2}，{id:3}
]}
}
render（）{
返回(
);
}
}
类管理器扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.data.map（（周，i）=>(
))}
);
}
}
类组件{
render（）{
返回(
周数：{this.props.weekData.id}

)
}
}
ReactDOM.render（，document.getElementById（'app'））

---

首先，您的代码中有很多拼写错误，我已经在下面的解决方案中修复了它们

所以这里的主要问题是，您试图访问不存在的道具。当您将

数据

传递给周组件（

数据={weekId}

）时，道具

数据

将存在于周组件中，而非

周组件

属性。因此，如果您访问

this.props.data

而不是

this.props.weekId

您将获得您的数据

//前面有各种导入
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
时间数组：[]
};
}
handleNewClick（）{
让tempWeek=this.getInput（）；
设tempArr=this.state.timeArray.slice（0）；
console.log（tempArr）；//logs[]
临时推送（临时周）；
console.log（tempArr）；//日志[1,1,1,1]
this.setState（{timeArray:tempArr}）；
}
getInput（）{//未实现，返回测试的预期值
返回[1,1,1,1]
}
render（）{
返回(
增加一周
);
}
}
//各种进口
类管理器扩展了React.Component{
render（）{
返回(
{this.props.weeksData.map（（weekId，i）=>(
))}
);
}
}
//各种进口
类组件{
render（）{
让weekData=this.props.weekId；
console.log（weekData）；//未定义日志，这与预期不符
console.log（this.props.data）；//按预期记录数据
返回未实现的组件；
}
}
ReactDOM.render（，document.getElementById（'app'））

对于这个基本问题，我很抱歉，我仍在学习如何使用ReactJS。我无法重现您的问题。你能发布剩下的代码吗？你能添加初始化

timeArray

的代码吗？@D-reaper完成，请参阅最新的编辑

timeArray

的每个元素是否需要

id

？初始化为

timeArray:[]在我的构造函数中，但是我使用
let temp=[0,1,0]
，
let arr=this.state.timeArray.slice（0）
arr.push（temp）
，然后
this.setState（{timeArray:arr}）
，因此
timeArray
是一个数组数组，但每个元素都没有
id
。我无法在
Week
组件中将它们引用为
this.props.weekData.id
的。如果不清楚，我可以添加到问题中，因为我认为这不会影响到错误，只要您正确处理数据，有关它的详细信息就不应该很重要。我发布的代码运行方式与我认为您所期望的一样。将你的代码与之进行比较，并开始修改它，直到你觉得有意义为止。哇，这是一个非常简单的错误，谢谢你的帮助。我为自己是个新手而道歉，并不是想把它变成一个扩展调试会话。
//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;

// 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;

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')
);

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'))