Question

我将反应代码转换为新格式存在问题。你能帮助我吗。现在我有了

function getStateFromFlux() {
    return {
        ...
    };
}
const TasklistsPage = React.createClass({

    getInitialState() {
        return {
            ...getStateFromFlux(),
            isCreatingTaskList: false
        };
    },
....
    _onChange() {
        this.setState(getStateFromFlux());
    }
});

我想要像这样的人。但我的api请求有错误“错误：TypeError：无法读取未定义的属性'map' 在TasklistsPage.render“

function getStateFromFlux() {
    return {
        taskLists: TaskListsStore.getTaskLists()
    };
}

export default class TasklistsPage extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      func: getStateFromFlux(),
      isCreatingTaskList: false
    };
    this._onChange = this._onChange.bind(this);
  }
  ....
  render() {
        ...

        return (
          ...
          {
           this.state.taskLists.map(list =>
              <ListItem
               key={list.id}
               leftIcon={<FolderIcon />}
                primaryText={list.name}
               onClick={router.history.push.bind(null, `/lists/${list.id}`)}
               />
            )
          }
          ...
        )
    }
    _onChange() {
          this.setState({func:getStateFromFlux()});
    }
}

我不知道我做错了什么。谢谢你的帮助。

Answer 1

而不是

export default class TasklistsPage extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      func: getStateFromFlux(),
      isCreatingTaskList: false
    };
    this._onChange = this._onChange.bind(this);
  }

尝试

export default class TasklistsPage extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      ...getStateFromFlux(),
      isCreatingTaskList: false
    };
    this._onChange = this._onChange.bind(this);
  }

在第一种情况下，您只需将 getStateFromFlux（）的返回值分配给键 func 。所以你的任务列表在 this.state.func.taskList 下。通过使用该函数进行扩展，它只会将它创建的对象的内容放在您传递给它的对象中。你也可以这样做。运算符来自 getStateFromFlux（）函数的返回值。

在你的onChange中，我建议你做同样的事情，你将它分配给代码中名为func的变量。

_onChange() {
      this.setState({ ...getStateFromFlux() });
}

使用属性和方法

1 个答案: