Question

我在React中的父组件状态中有以下2D数组timeArray。我在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，因为来自我的父组件的console.log(this.props.weekData)是一个2D数组。但是，当我在Week的{{1}}函数中使用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;

周

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

您尚未发布的代码中的某处，您在配置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'))

and on jsbin

Answer 2

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

所以这里的主要问题是你试图访问不存在的道具。当您将data传递给周组件（data={weekId}）时，道具data将存在于周组件中，不 weekId属性。因此，如果您访问this.props.data而非this.props.weekId，则会获得您的数据。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用React.js

2 个答案: