setState（）不更新值

Question

I'm trying to update state of my component and it's not working. I have Main page container component => nested Navbar container component => nested NavItem UI component. Also on Main page I have AddNavItem container component which should add item to Navbar. It looks like this:

Main
|
|--NavBar
|   |
|   |--NavItem
|
|--AddNavItem

This is my Main page code:

import React, { Component } from 'react';
import Navbar from '../nav/Navbar'
import AddNavItem from '../fields/AddNavItem'

class Main extends Component {
    state = {
        items: [
            {id: 1, name: 'Услуги', link: 'services'},
            {id: 2, name: 'Цены', link: 'prices'},
            {id: 3, name: 'Как это работает?', link: 'works'},
        ]
    }

    addNavItem = (item) => {
        this.setState((state) => {
            let newItems = [...state.items];
            newItems.unshift(item)
            console.log(newItems);
            return { 
               items: newItems
            }
        });
    }

    render() {
        return (
            <div>
                <Navbar items={ this.state.items }/>
                <AddNavItem addNavItem={ this.addNavItem }/>
            </div>
        );
    }
}

export default Main;

The problem is that I always get old array with 3 initial obj even after addNavItem is firing. <Navbar /> still gets array with 3 element. I have read about async setState and makes as describe in doc https://reactjs.org/docs/faq-state.html What have I doing wrong?

UPD: I changed code (unshift) to return array, not a length of the array. Console log shows me that I get new array with 4 obj

UPD: My complete code for all components:

Navbar

import React, { Component } from 'react';
import NavItem from './NavItem';

class Navbar extends Component {
    state = {
        items: this.props.items,
    }

    render() {
        return (
            <div className="centered navbar grey">
                <h2>MyReact</h2>
                <ul>
                    <NavItem items={ this.state.items }/>
                </ul>
            </div>
        );
    };
}

export default Navbar;

NavItem:

import React from 'react';

const NavItem = ({ items }) => { 
    const menuItemList = items.map((item) => {
        return (
            <li key={item.id}>
                { item.name }
            </li>
        );
    })
    return (
        <div>
            { menuItemList }
        </div>
    )
}

export default NavItem;

AddNavItem:

import React, { Component } from 'react';

class AddNavItem extends Component {
    state = {
        id: Math.random(),
        name: null,
        link: null
    }

    handleInput = (e) => {
        this.setState({
            [e.target.id]: e.target.value,
        });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.addNavItem(this.state);
    }

    render() {
        return (
            <div className="centered flex-column-centered">
                <form onSubmit={ this.handleSubmit }>
                    <h4 className="labelField">Название раздела:</h4>

                    <input 
                        className="inputField" 
                        type="text"
                        id="name" 
                        placeholder="укажите название" 
                        onChange={ this.handleInput } />

                    <h4 className="labelField">URL:</h4>

                    <input
                        className="inputField" 
                        type="text"
                        id="link" 
                        placeholder="укажите ссылку" 
                        onChange={ this.handleInput } />

                    <button className="submitBtn">Добавить</button>
                </form>
            </div>
        );
    }
}

export default AddNavItem;

Answer 1

 let arr = [3,4,5] console.log(arr.unshift(3,5)) 

addNavItem = (item) => {
    let newItems = [...this.state.items];
    newItems.unshift(item)
    this.setState({
            items: newItems
        }
    });
}

Now you are updating the array and adding the elements to the begining of it, which i assume you wanted and is why you picked upshift. you are then setting the sate equal to the updated array you have.

Answer 2

According to Mozilla docs

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

So when you try to change your state using this, it's returning the length of the array instead of the new array you're trying to update the state to. On top of that, this method is mutable as you are modifying the original array instead of returning a new copy of it. I would suggest changing your code to use the array.prototype.concat() method instead as it keeps your state immutable as it returns a new array instead of modifying the original array.

Try changing your method to this instead.

addNavItem = (item) => {
    this.setState({ items: this.state.items.concat(item) });
}

Edit:

If you are using es6, you can use the spread syntax which also returns a new copy of the array.

addNavItem = (item) => {
    this.setState({ items: [...this.state.items, item] });
}

Edit 2: In your Navbar component, you're setting this.props.items to state when it initializes and then you don't update your state when this.props.items change.

You don't need state for this component, I would change your NavBar component to look like this:

import React from 'react';
import NavItem from './NavItem';

const Navbar = (props) => {
        return (
            <div className="centered navbar grey">
                <h2>MyReact</h2>
                <ul>
                    <NavItem items={ props.items }/>
                </ul>
            </div>
        );
}

export default Navbar;

Edit 3:

If you want to keep your items inside state in your NavBar component, then you need to watch for updates being made to the items props on that component.

import React, { Component } from 'react';
import NavItem from './NavItem';

class Navbar extends Component {
    state = {
        items: this.props.items,
    }

    componentDidUpdate(prevProps) {
      if (this.props.items!== prevProps.items) {
        this.setState({ items: this.props.items });
      }
    }

    render() {
        return (
            <div className="centered navbar grey">
                <h2>MyReact</h2>
                <ul>
                    <NavItem items={ this.state.items }/>
                </ul>
            </div>
        );
    };
}

export default Navbar;

Answer 3

addNavItem = (item) => {
  this.setState((prevState) => {items: [...prevState.items, item]})
}

This should work.