Question

我在React.js中真的很新。我想将一个状态（我之前从api数据设置）传递给一个组件，因此可选列表的值可以从我的api数据中动态填充。这是我获取数据的代码：

getListSiswa(){
  fetch('http://localhost/assessment-app/adminpg/api/v1/Siswa/')
  .then(posts => {
    return posts.json();
  }).then(data => {
    let item = data.posts.map((itm) => {
      return(
        <div key={itm.siswa_id}>
          <ListItem
            value={itm.siswa_id}
            primaryText={itm.nama}
          />
        </div>
      )
    });

  this.setState({item: item});
  });
}

从该代码中，我设置了一个名为item的状态。我想将此状态传递给组件。这是我的代码：

const ListSiswa = () => (
  <SelectableList>
    <Subheader>Daftar Siswa</Subheader>
      {this.state.item}
  </SelectableList>
);

但我得到一个错误，说

TypeError：无法读取属性＆＃39; item＆＃39;未定义的

对不起，我很抱歉。但如果你明白我的意思，我真的很期待你的解决方案。

以下是我的完整代码以获取更多信息：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {List, ListItem, makeSelectable} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';

let SelectableList = makeSelectable(List);

function wrapState(ComposedComponent) {
  return class SelectableList extends Component {
    static propTypes = {
      children: PropTypes.node.isRequired,
    };

    getListSiswa(){
      fetch('http://localhost/assessment-app/adminpg/api/v1/Siswa/')
      .then(posts => {
        return posts.json();
      }).then(data => {
        let item = data.posts.map((itm) => {
          return(
            <div key={itm.siswa_id}>
              <ListItem
                value={itm.siswa_id}
                primaryText={itm.nama}
              />
            </div>
          )
        });

      this.setState({item: item});
      });
    }

    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      });

      this.getListSiswa();
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index,
      });
    };

    render() {
      console.log(this.state.item);
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {this.props.children}
        </ComposedComponent>
      );
    }
  };
}

SelectableList = wrapState(SelectableList);

const ListSiswa = () => (
  <SelectableList>
    <Subheader>Daftar Siswa</Subheader>
    {this.state.item}
  </SelectableList>
);

export default ListSiswa;

Answer 1

错误发生在此组件中。

const ListSiswa = () => (
  <SelectableList>
    <Subheader>Daftar Siswa</Subheader>
    {this.state.item}
  </SelectableList>
);

此组件称为无状态功能组件（Read）

它只是一个纯函数，它接收一些数据并返回jsx。

您在这里没有访问this。

Answer 2

一种方法是通过在父组件中定义状态而将通过道具传递给孩子：

let SelectableList = makeSelectable(List);

function wrapState(ComposedComponent) {
  return class SelectableList extends Component {
    static propTypes = {
      children: PropTypes.node.isRequired,
    };

    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      });

      this.props.fetchItem();
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index,
      });
    };

    render() {
      console.log(this.state.item);
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {this.props.children}
          {this.props.item}
        </ComposedComponent>
      );
    }
  };
}

SelectableList = wrapState(SelectableList);

class ListSiswa extends Component {
  state = {
    item: {}
  }

  getListSiswa(){
    fetch('http://localhost/assessment-app/adminpg/api/v1/Siswa/')
    .then(posts => {
      return posts.json();
    }).then(data => {
      let item = data.posts.map((itm) => {
        return(
          <div key={itm.siswa_id}>
            <ListItem
              value={itm.siswa_id}
              primaryText={itm.nama}
            />
          </div>
        )
      });

    this.setState({item: item});
    });
  }

  render() {
    return (
      <SelectableList item={this.state.item} fetchItem={this.getListSiswa}>
        <Subheader>Daftar Siswa</Subheader>
      </SelectableList>
    );
  }
}

export default ListSiswa;

请注意，现在wrapState我正在使用this.props.item和this.props.fetchItem访问该状态。这种做法在React中也称为prop钻取，一旦您的应用扩展并且多个嵌套组件，它将成为一个问题。要进行扩展，您可能需要考虑使用Redux或Context API。希望有所帮助！

将状态值传递给组件

2 个答案: