Как передать значения массива на разные страницы в React?

Question

Я пытаюсь передать код {массив} с одной страницы на другую,

это мой код:

import React, { Component } from 'react';
import "./App.css";
import SimpleStorage from "react-simple-storage";
import  ViewUsers from './ViewUsers';


export class AddUser extends Component{   

  constructor(props) {

    super(props);

    this.state = {
      newItem:" ",
      list: []
    };
  }

  updateInput(key, value) {
    // update react state
    this.setState({ [key]: value });
  }

  updatename(key,value){
    this.setState({[key]:value});
  }

   updatelname(key,value){
    this.setState({[key]:value});
  }
   updateage(key,value){
    this.setState({[key]:value});
  }

  addItem() {
    // create a new item with unique id
    const newItem = {
      id: 1 + Math.random(),
      value:this.state.newItem.slice(),
      fname:this.state.fname,
      lname:this.state.lname,
      age:this.state.age
    };

    const list = [...this.state.list];

    // add the new item to the list
    list.push(newItem);

    this.setState({
      list,
      newItem: " "
    });
    console.log(this.state.list);

}

  render() {
    let list=this.state.list
    return (
      <div className="App">

        <SimpleStorage parent={this} />
              <br/>

          Add Information:
          <br />
        <label className="col-lg-2 control-label">ID:</label>
        <input name="idIn" type="text" value={this.state.newItem} onChange={e => this.updateInput("newItem", e.target.value)} />
        <label className="col-lg-2 control-label">First Name:</label>
        <input name="fNameIn" value={this.state.fname} onChange={e => this.updatename("fname", e.target.value)}/>

        <label className="col-lg-2 control-label">Last Name:</label>
        <input name="lNameIn" value={this.state.lname} onChange={e => this.updatelname("lname", e.target.value)}/>

        <label className="col-lg-2 control-label">Age:</label>
        <input name="ageIn" value={this.state.age} onChange={e => this.updateage("age", e.target.value)} />
        <br/>
        <br/>

          <button
            onClick={() => this.addItem()}
            disabled={!this.state.newItem.length || !this.state.fname || 
              !this.state.lname || !this.state.age }
          >
            &#43; Add
          </button>
          <br /> <br />
          <div>
            <ViewUsers>
          {list.map(lis => 
            <div>{lis.id} </div> 
            )}
            </ViewUsers>

        </div>

          </div>
)}
}

Это мой GUI:

И это локальное хранилище моего списка:

теперь мне нужно показать эти информация на другой странице с именем: ViewUsers.

Итак, как я могу это сделать? карта не работает со мной,

Также я пробую этот код, но он дает мне информацию о массиве, а не о реальных значениях:

EDIT:

Я использую этот код в ViewUsers:

import React, { Component } from 'react';

class ViewUsers extends Component{

constructor(props) {

    super(props);

};
render(){
    return(
<ul>
 {this.props.list.map(item => (
   <li key={item}>{item}</li>
  ))}
</ul>


);

}
}
export default ViewUsers;

и получаю эту ошибку:

, и когда я использую:

props.list

вместо this.props.list, я получаю сообщение об ошибке: TypeError: невозможно прочитать свойство 'props' неопределенного

Заранее благодарим за помощь.

Answer 1

Если я правильно понял вашу проблему, вы хотите передать список в качестве «свойств» новому компоненту, в данном случае вашему компоненту ViewUsers. Попробуйте:

<ViewUsers list={this.state.list} />

, а затем внутри вашего компонента ViewUsers вы можете получить этот список как this.props.list или props.list, в зависимости от того, является ли он компонентом класса или функциональным компонентом. Затем вы можете выполнить сопоставление и вернуть div для значений.

Может быть полезно освежить в памяти реквизиты: https://reactjs.org/docs/components-and-props.html

Answer 2

Это нормально, потому что дочерний компонент получает начальное состояние списка, а в дочернем компоненте нет logi c, который он должен повторно отображать при изменении состояния в родительском ... поэтому используйте методы жизненного цикла в дочернем компоненте чтобы сказать, что он должен повторять рендеринг всякий раз, когда происходит изменение состояния в родительском

Answer 3

наконец-то я нашел простой ответ, это файл AddUsers:

import React, { Component } from 'react';
import "./App.css";
import SimpleStorage from "react-simple-storage";
import  ViewUsers from './ViewDoctors';


 class AddUsers extends Component{   

    constructor(props) {

        super(props);

        this.state = {
            newItem: " ",
            list: []
        };
    }

    updateInput(key, value) {
        // update react state
        this.setState({ [key]: value });
    }

    updatename(key, value) {
        this.setState({ [key]: value });
    }

    updatelname(key, value) {
        this.setState({ [key]: value });
    }
    updateage(key, value) {
        this.setState({ [key]: value });
    }

    addItem() {
        // create a new item with unique id
        const newItem = {
            id: this.state.id,
            fname: this.state.fname,
            lname: this.state.lname,
            age:   this.state.age
        };

        const list = [...this.state.list];

        // add the new item to the list
        list.push(newItem);

        this.setState({
            list,
            newItem: " "
        });
        console.log(this.state.list);

    }

    render() {
        //let list = this.state.list
        return (
            <div className="App">
                <SimpleStorage parent={this} />
                <br />
                Add Information:
                <br />
                <label className="col-lg-2 control-label">ID:</label>
                <br />
                <input name="idIn" type="text" value={this.state.id || ""} onChange={e => this.updateInput("id", e.target.value)} />
                <br />
                <label className="col-lg-2 control-label">First Name:</label>
                <br />
                <input name="fNameIn" value={this.state.fname || ""} onChange={e => this.updatename("fname", e.target.value)} />
                <br />

                <label className="col-lg-2 control-label">Last Name:</label>
                <br />
                <input name="lNameIn" value={this.state.lname || ""} onChange={e => this.updatelname("lname", e.target.value)} />
                <br />

                <label className="col-lg-2 control-label">Age:</label>
                <br />
                <input name="ageIn" value={this.state.age || ""} onChange={e => this.updateage("age", e.target.value)} />
                <br />
                <br />

                <button
                    onClick={() => this.addItem()}
                    disabled={!this.state.id || !this.state.fname ||
                        !this.state.lname || !this.state.age}
                >
                   Add
                </button>
                <br /> <br />
                <div>
                    <ViewUsers list={this.state.list}/>
                </div>
            </div>
        )
    }
}
export default AddUsers; 

а это файл ViewUser:

import React, { Component } from 'react';

class ViewUsers extends Component {
        constructor(props) {
        super(props);

        this.state = {
            list: JSON.parse(localStorage.getItem('_list')) 

        }


      //  console.log(this.state.list);
 };

    render() {
        return (
            <div> 
                {this.state.list.map((item) => {
                    return (
                        <div key={`list-item-${item.id}`}>

                                <p>ID {item.id}</p>

                                <p>Name {item.name}</p>

                                <p>Age {item.age}</p>  

                        </div>
                        );})}
                        </div>

                )}


}
export default ViewUsers;

И он работает, но список не должен быть пусто.

Примечание: в файле get item of viewusers я пишу _list вместо list только потому, что он выглядит вот так в моем локальном хранилище в браузере.

Answer 4

Вот моя версия вашего кода, дайте мне знать, если это поможет.

Добавить экран пользователя

import React, { Component } from 'react';
import "./App.css";
import SimpleStorage from "react-simple-storage";
import ViewUsers from './ViewUsers';


export class AddUser extends Component {

    constructor(props) {

        super(props);

        this.state = {
            newItem: " ",
            list: []
        };
    }

    updateInput(key, value) {
        // update react state
        this.setState({ [key]: value });
    }

    updatename(key, value) {
        this.setState({ [key]: value });
    }

    updatelname(key, value) {
        this.setState({ [key]: value });
    }
    updateage(key, value) {
        this.setState({ [key]: value });
    }

    addItem() {
        // create a new item with unique id
        const newItem = {
            id: 1 + Math.random(),
            value: this.state.newItem.slice(),
            fname: this.state.fname,
            lname: this.state.lname,
            age: this.state.age
        };

        const list = [...this.state.list];

        // add the new item to the list
        list.push(newItem);

        this.setState({
            list,
            newItem: " "
        });
        console.log(this.state.list);

    }

    render() {
        let list = this.state.list
        return (
            <div className="App">
                <SimpleStorage parent={this} />
                <br />
                Add Information:
                <br />
                <label className="col-lg-2 control-label">ID:</label>
                <input name="idIn" type="text" value={this.state.newItem} onChange={e => this.updateInput("newItem", e.target.value)} />
                <label className="col-lg-2 control-label">First Name:</label>
                <input name="fNameIn" value={this.state.fname} onChange={e => this.updatename("fname", e.target.value)} />

                <label className="col-lg-2 control-label">Last Name:</label>
                <input name="lNameIn" value={this.state.lname} onChange={e => this.updatelname("lname", e.target.value)} />

                <label className="col-lg-2 control-label">Age:</label>
                <input name="ageIn" value={this.state.age} onChange={e => this.updateage("age", e.target.value)} />
                <br />
                <br />

                <button
                    onClick={() => this.addItem()}
                    disabled={!this.state.newItem.length || !this.state.fname ||
                        !this.state.lname || !this.state.age}
                >
                    &#43; Add
                </button>
                <br /> <br />
                <div>
                    <ViewUsers list={this.state.list}>
                </div>
            </div>
        )
    }
}

Просмотр пользовательского компонента

import React, { Component } from 'react';

class ViewUsers extends Component {

    constructor(props) {
        super(props);

        this.state = {
            list: (this.props.list !== null && this.props.list !== undefined && this.props.list !== '' && Array.isArray(this.props.list)) ? this.props.list : []
        }
    };

    render() {
        return (
            <div>
                {this.state.list.map((item) => {
                    return (
                        <table key={`list-item-${item.id}`}>
                            <tr>
                                <td>ID</td>
                                <td>{item.id}</td>
                            </tr>
                            <tr>
                                <td>Name</td>
                                <td>{item.fname} {item.lname}</td>
                            </tr>
                            <tr>
                                <td>Age</td>
                                <td>{item.age}</td>
                            </tr>
                            <tr>
                                <td>Value</td>
                                <td>{item.value}</td>
                            </tr>
                        </table>
                    )
                })}
            </div>
        );

    }
}
export default ViewUsers;