Этот let one_book = this.state.one_book;
не создает копию массива. Javascript массивы и объекты хранятся в переменных как ссылки.
Чтобы скопировать массив без случайной мутации, используйте деструктуризацию:
let one_book = [...this.state.one_book];
Однако похоже, что вы пытаетесь получить id
книги, используя индекс массива, как если бы это был id
. Вместо этого вам нужно будет найти нужный объект по идентификатору.
class Test extends React.Component {
state = {one_book : [
{
"id": 1,
"bookname": "Physics",
"price": 600,
"author": "ABC",
"pages": 567,
"category" : "School Books"
},
{
"id": 2,
"bookname": "Let Us C",
"price": 1300,
"author": "XYZ",
"pages": 1267,
"category" : "Technical"
}
]}
updateName = event => {
var newValue = event.target.value
const id = 1;
// Map over the array values
let newBooks = this.state.one_book.map(book => {
// If the id matches, update the book name
if (book.id === id) {
return {...book, bookname: newValue}
}
return book;
})
// Update the state with the new array
this.setState({ one_book: newBooks });
}
render() {
console.log(this.state.one_book)
return <input onChange={this.updateName} />
}
}
ReactDOM.render(<Test />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>