Блог

Главная - Вопросы по программированию - react.js обход собственного массива react, функция щелчка

react.js обход собственного массива react, функция щелчка

#javascript #reactjs #react-native

#javascript #reactjs #react-native

Вопрос:

Когда я использовал ‘setState’ для обновления массива, щелкнув функцию, я обнаружил, что если добавленный элемент уже содержится в массиве, это не только увеличит длину массива, но и заменит старые элементы новыми.

Ниже приведен код:

 determineOrder = (obj) => {
    let list = this.state.orderList
    
    obj.key = list.length.toString()
    
    list.push(obj)
    console.log(list)
    this.setState({ orderList: list })
}


this.state.detailList.map((item, index) => {
    return (
        <TouchableOpacity style={[styles.blockStyle]} key={index} onPress={()=>determineOrder(item)}>
             <Text style={styles.font} >{this.props.translate ? item.cnName : item.name}</Text>
        </TouchableOpacity> 
    )
 })

введите описание изображения здесь

введите описание изображения здесь

Комментарии:

1. зачем вам нужны эти изображения? вы можете просто отредактировать текстовый код, который вы вставили, добавив эти комментарии и вообще удалив изображения. изображения, добавляющие дополнительные ненужные недоразумения при чтении вашего вопроса

Ответ №1:

Вы снова вставляете тот же объект в массив. В Javascript объекты являются ссылочным типом. Обновление obj.key обновит существующий объект в массиве, поскольку это тот же объект.

Вам нужно создать новую копию объекта.

 const clone = Object.assign({}, obj);
clone.key = list.length.toString();
list.push(clone);

Примечание: Object.assign не будет глубоко копировать вложенные объекты. Альтернативным подходом может быть использование JSON.stringify и JSON.parse 

 const clone = JSON.parse(JSON.stringify(obj))

Ответ №2:

Вы не можете обновить состояние с помощью таких операций, как push. Вам назначается список вашего состояния, и он сохраняет ссылку, если вы хотите скопировать, вы должны создать его клон, а не ссылку, например, let list = […this.state.orderList]

 determineOrder = (obj) => {
    
    obj.key = list.length.toString()
    
    list.push(obj)
    console.log(list)
    this.setState((prevState) => { 
    return {
             ...prevState, 
             orderList: [...prevState.orderList, obj]
           }
    });
}


this.state.detailList.map((item, index) => {
    return (
        <TouchableOpacity style={[styles.blockStyle]} key={index} onPress={()=>determineOrder(item)}>
             <Text style={styles.font} >{this.props.translate ? item.cnName : item.name}</Text>
        </TouchableOpacity> 
    )
 })