时间戳

首页 > 解决方案 > setState 如何在索引中排列？反应式

javascript - setState 如何在索引中排列？反应式

问题描述

我有一个数组：

 constructor() {
    super();
    this.state = {
        title: "",
        content: ["",""],
        note_number: "",
        fetch_notes: "",
        img: "",
    }
}

所以在这里我将值设置为数组：

    const {params} = this.props.navigation.state;
    this.setState({title: params.data.title});
    let array_notes = this.state.content.slice();
    array_notes[0] = params.data.content;
    this.setState({content: array_notes});
    this.setState({note_number: params.note_number});
    this.setState({fetch_notes: params.fetch_notes});

如您所见，我使用 slice 方法创建了一个新变量，这将创建原始数组的副本，并且索引为零，我告诉他在该索引中存储内容（字符串）插入内容，问题是在这里，我在索引 1 中打印数组，该数组应该为空，但它的值与索引 0 相同，我认为它的原因是 onchangetext 方法，即：

  <View style = {this.styles.textinput_container}>
                <TextInput style = {this.styles.TextInput_title} placeholder = "Title" multiline = {true} maxLength = {80} value = {this.state.title} onChangeText = {title => this.setState({title: title})}></TextInput>
                <TextInput placeholder = "Content" multiline = {true} value = {this.state.content[0]} onChangeText = {text => this.setState(({content:[text,this.state.content[0]]}))}></TextInput>
                <Text>{this.state.content[1]}</Text>
            </View>

Onchangetext 函数：

text => this.setState(({content:[text,this.state.content[0]]}));

我不太了解这段代码，因为一个人把它传给了我，但它应该只存储在零位置，为什么当我打印它时

<Text>{this.state.content[1]</Text>

索引 1 获得与零相同的值？

标签： javascriptreact-native

解决方案

你的功能

text => this.setState(({ content: [text, this.state.content[0]] }));

是设置this.state.content到一个数组，其中第 0 个索引等于text并且第一个索引等于，this.state.content[0]即之前第 0 个索引中的任何内容

如果您希望数组只有一个值，即您可以执行的第 0 个索引

text => this.setState(({ content: [text]] }));

如果要text替换 的第 0 个索引this.state.content，可以执行

text => this.setState(state => ({ content: [text, ...state.content.slice(1) ]]}));

编辑：

如果你想更新任意索引，你可以像这样创建一个通用的更新函数

const setIndex = (vals, i, v) => [
  ...vals.slice(0, i),
  v,
  ...vals.slice(i+1)
];

并像这样使用它，

text => this.setState(state => ({ content: setIndex(state.content, 0, text) }));

推荐阅读