将状态值传递给组件

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: Cannot read property 'item' of undefined

对于我的错误解释，我深表歉意。但是如果你明白我的意思，我真的很期待你的解决方案。

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

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)

它只是一个接收一些数据和 returns jsx 的纯函数。

您没有this此处的访问权限。

Answer 2

一种方法是在父组件中定义 state，然后 通过 props 将其传递给子组件:

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 drilling，一旦你的应用程序扩展和多个嵌套组件，它就会成为一个问题。要扩大规模，您可能需要考虑使用 Redux or the Context API。希望有帮助！

将状态值传递给组件

Pass state value to component

list

listitem

reactjs

material-ui