Javascript 如何在react js中以数组内部状态保存数据

我在

对话框中有
文本字段
和
扁平按钮
。我想将完整的任务列表保存在我在状态中定义的数组中

this.state = {
  open: false,
  todos: [{ id: -1, text: "", completed: false }],
  notetext: ""
};

我能够从州政府获取
TextField
的文本。单击
FlatButton
，我想将任务保存在一个数组中。我有
handleCreateNote
功能，点击
FlatButton
即可附加该功能

我不知道在数组中添加任务的方法是什么。有人能帮我做些什么吗

const AppBarTest = () =>
  <AppBar
    title={strings.app_name}
    iconClassNameRight="muidocs-icon-navigation-expand-more"
    style={{ backgroundColor: colors.blue_color }}
  />;

class App extends Component {
  constructor(props) {
    injectTapEventPlugin();
    super(props);
    this.state = {
      open: false,
      todos: [{ id: -1, text: "", completed: false }],
      notetext: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  handleCreateNote = () => {
    console.log(this.state.notetext);
  };

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  render() {
    return (
      <MuiThemeProvider>
        <div>
          <AppBarTest />
          <FloatingActionButton
            style={styles.fab}
            backgroundColor={colors.blue_color}
            onTouchTap={this.handleOpen}
          >
            <ContentAdd />
          </FloatingActionButton>
          <Dialog
            open={this.state.open}
            onRequestClose={this.handleClose}
            title={strings.dialog_create_note_title}
          >
            <TextField
              name="notetext"
              hintText="Note"
              style={{ width: "48%", float: "left", height: 48 }}
              defaultValue={this.state.noteVal}
              onChange={this.handleChange}
            />

            <div
              style={{
                width: "4%",
                height: "48",
                backgroundColor: "red",
                float: "left",
                visibility: "hidden"
              }}
            />

            <FlatButton
              label={strings.create_note}
              style={{ width: "48%", height: 48, float: "left" }}
              onTouchTap={this.handleCreateNote}
            />
          </Dialog>

        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

const-AppBarTest=（）=>
;
类应用程序扩展组件{
建造师（道具）{
injectTapEventPlugin（）；
超级（道具）；
此.state={
开：错，
todos:[{id:-1，文本：“”，已完成：false}]，
注：文本：“
};
this.handleChange=this.handleChange.bind（this）；
}
handleOpen=（）=>{
this.setState（{open:true}）；
};
handleClose=（）=>{
this.setState（{open:false}）；
};
handleCreateNote=（）=>{
log（this.state.notetext）；
};
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
render（）{
返回(
);
}
}
导出默认应用程序；
首先创建现有状态数组的副本，然后使用
数组。按
添加新数据，然后使用
设置状态
更新状态数组值

像这样：

handleCreateNote = () => {
    let todos = [...this.state.todos];   //creating the copy

    //adding new data
    todos.push({
        id: /*unique id*/,
        text: this.state.notetext,
        completed: false
    });

    //updating the state value
    this.setState({todos});
};

有关“…”的详细信息，请查看此答案-->

MDN：

更新：

您也可以使用
slice（）
，而不是spread操作符，这也将返回一个新数组，关键是我们需要使用任何方法创建状态数组的副本（在进行任何更改之前）

检查此代码段：


设a=[{key:1}，{key:2}]；
设b=[…a]；
console.log（'b'，b）
首先创建现有状态数组的副本，然后使用
数组。按
添加新数据，然后使用
设置状态
更新状态数组值

像这样：

handleCreateNote = () => {
    let todos = [...this.state.todos];   //creating the copy

    //adding new data
    todos.push({
        id: /*unique id*/,
        text: this.state.notetext,
        completed: false
    });

    //updating the state value
    this.setState({todos});
};

有关“…”的详细信息，请查看此答案-->

MDN：

更新：

您也可以使用
slice（）
，而不是spread操作符，这也将返回一个新数组，关键是我们需要使用任何方法创建状态数组的副本（在进行任何更改之前）

检查此代码段：


设a=[{key:1}，{key:2}]；
设b=[…a]；
console.log（'b'，b）您可以使用
concat
创建新的
数组
：

this.setState({
    todos: [].Concat(this.state.todos, {id, text,  complete})
})

您可以使用
concat
创建新的
数组
：

this.setState({
    todos: [].Concat(this.state.todos, {id, text,  complete})
})

什么。这里的意思是
[…this.state.todos]？这是解构任务。请在此处阅读更多内容：事实上是这样，这可以被认为是解构任务的反面。@ArneHugo您的意思是将道具转换为对象吗？@Williams它可以用于多种用途。在本例中，它用于获取数组中
this.state.todos
指向的每个项，并将它们添加到新数组中。这样我们就避免了对原始数组的变异（就像push一样），以避免混淆并减少bug的概率。这里的意思是
[…this.state.todos]？这是解构任务。请在此处阅读更多内容：事实上是这样，这可以被认为是解构任务的反面。@ArneHugo您的意思是将道具转换为对象吗？@Williams它可以用于多种用途。在本例中，它用于获取数组中
this.state.todos
指向的每个项，并将它们添加到新数组中。通过这种方式，我们避免了对原始数组的变异（就像push一样），以避免混淆并减少出现错误的可能性。