Question

我正在尝试在表中显示一些数据，但是我没有任何运气。下面是我正在使用的对象以及该表的组件。当我尝试访问数据的键和值时，我不断收到一条错误消息，提示未定义数据。

对象：

{"exampleReducer":{"exampleData":{"exampleData":{"data":{"userId":1,"id":1,"title":"delectus aut autem","completed":false}

组件：

class App extends Component {

  onClick = () => {
    this.props.fetchData();
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}><h1>Hello World</h1></button>
        {JSON.stringify(this.props.stateData)}
        <table className="table table-striped table-hover">
          <thead>
            <tr>
              <th>User ID</th>
              <th>ID</th>
              <th>Title</th>
              <th className="text-right">Completed</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              {Object.keys(this.props.stateData).map(value => <td>{value.userId}</td>)}
              {Object.values(this.props.stateData).map(value => <td>{value.id}</td>)}
              {Object.values(this.props.stateData).map(value => <td>{value.title}</td>)}
              {Object.values(this.props.stateData).map(value => <td>{value.completed}</td>)}
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    stateData: state
  }
};

function mapDispatchToProps(dispatch) {
  return {
    fetchData: () => dispatch(fetchData())
  }
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Answer 1

这是简化且可行的解决方案

    class App extends Component {

      onClick = () => {
         this.props.fetchData();
      }

      render() {
          const { stateData } = this.props;
          return (
             <div>
                 <button onClick={this.onClick}><h1>Hello World</h1></button>
                 {stateData && JSON.stringify(stateData)}
               <table className="table table-striped table-hover">
                   <thead>
                         <tr>
                             <th>User ID</th>
                             <th>ID</th>
                             <th>Title</th>
                             <th className="text-right">Completed</th>
                            </tr>
                   </thead>
                   <tbody>
                          {stateData && ( <tr>
                               <td>{stateData.exampleReducer.exampleData.exampleData.data.userId}</td>
                           <td>{stateData.exampleReducer.exampleData.exampleData.data.id}</td>
                    <td>{stateData.exampleReducer.exampleData.exampleData.data.title}</td>
                 <td>{stateData.exampleReducer.exampleData.exampleData.data.completed}</td>

                  </tr>)}
              </tbody>
           </table>
         </div>
          );
       }
     }

您遇到的情况是，stateData将在初始渲染时未定义，但是您正在对一个未定义的值进行迭代，这就是为什么会出现该错误的原因。

Answer 2

完全同意Hemadri Dasari提供的解决方案，但 {stateData.exampleReducer.exampleData.exampleData.data} 这是提取数据的漫长路径。

将这些路径定义为mapStateToProps函数为，这是一个好习惯，

const mapStateToProps =（状态）=> { 返回{ stateData： state.exampleReducer.exampleData.exampleData.data }

这样您就可以直接使用stateData访问对象的属性。

希望这会有所帮助，

干杯！

在表格中显示道具的数据

2 个答案: