setState 如何在索引中排列？ react-native

Question

i have in the state an array:

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

so here i set the value to the array:

    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});

as you can see, i create a new variable with the slice method, this will create a copy of the original array and with the index zero, i tell him in that index store the content (string) the insert to content, the problem is here where i print the array in the index 1, that should be empty, but it gets the same value as the index zero, i think its bacause the method onchangetext, which is:

  <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 function:

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

i dont really understad well this code, because a guy passed it to me, but it should only store in the position zero, why when im printing it

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

the index 1 gets the same value as the zero?

Answer 1

Your function

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

is settings this.state.content to an array where the 0th index is equal to text and the 1st index is equal to this.state.content[0] ie whatever was in the 0th index previously

If you want the array to only have one value ie the 0th index you can do

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

If you want text to replace the 0th index of this.state.content , you can do

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

EDIT:

If you want to update any arbitrary index, you could create a generic update function like so

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

and use it like this,

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