javascript - 数据未写入

Question

我正在严格按照课程制作我的反应应用程序。但是出现了这样的错误，我试图弄清楚一整天，但我不知道为什么会这样。重点是我的addProduct函数位于ModalAddProduct组件中，实际上它只是收集数据并将其传递给addProduct函数，该函数位于redux / state.js文件夹中，此函数只是将通过回调传递给它的数据添加到存储所有产品的状态对象中。但问题是没有数据被写入。虽然轻拍时很明显数据进来了，但没有被推入数组。我尝试了其他数据，同样的错误。此外，在调试时，如果将课程悬停在数组上，它会显示添加的产品，但它们不在数组本身（有截图）。此外，当根据课程添加更改渲染时，应用程序会显示产品，但在重新启动后它们会消失，因为它们没有在产品数组中注册

export let addProduct = (data) => { 
debugger;

 state.mainPage.products.push(data);
 rerenderF(state);
}
export default state;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import state from './redux/state';
import {addProduct} from './redux/state';

ReactDOM.render(
  <React.StrictMode>
    <App state={state} addProduct={addProduct}/>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

import logo from './logo.svg';
import React from 'react';
import Nav from './Components/Navbar/Nav';
import Footer from './Components/Footer/Footer';
import AdminProducts from './Pages/AdminProducts'; 

import './App.css';
import { BrowserRouter, Route, Router } from 'react-router-dom';

const  App = (props) => {
  return (
     <div>
       <Nav></Nav>
       <Route path="/products" 
       render={ () => <AdminProducts products={props.state.mainPage.products} addProduct={props.addProduct}/>} />
       <Footer></Footer>
     </div>
    
  );
}
export default App;

function App(props) {
  return (
    <div>
        <ProductsList products={props.products} addProduct={props.addProduct} />
    </div>
  );
}

function ProductList(props) {
    return (
       <div className="container">
           <AddProductButton />
           <ModalAddProduct addProduct={props.addProduct}/>
          <div className="row"> 
               {props.products.map( product => {
                   return <ProductAdminCard  product={product} />
               })}
          </div>
       </div>
    );
}

import { checkPropTypes } from 'prop-types';
import React from 'react';

function ModalAddProduct(props) {
    const urlPhoto = 'https://sun9-56.userapi.com/impg/46d6OEAguHzOvhD8gFvtuaKJpgbB2HdpCrR2wQ/rXhMbv1AJnE.jpg?size=800x800&quality=96&proxy=1&sign=1c6396244ef85dbe1ab426308018ddca';
    let setPrice = React.createRef();
    let setProducer = React.createRef();
    let setType = React.createRef();
    let setSizes = React.createRef();
    let setDescription = React.createRef();
    let setTags = React.createRef();
    let setPhoto = React.createRef();

    const addProduct = () => {
      const data = {
                id: 9,
                "urlPhoto": urlPhoto,
                "price": `${setPrice.current.value}`,
                "producer": `${setProducer.current.value}`,
                "type": `${setType.current.value}`,
                "sizes": `${setSizes.current.value}`,
                "description": `${setDescription.current.value}`,
                "tags": `${setTags.current.value}`
      }
     props.addProduct(data);
     setPrice.current.value = '';
     setProducer.current.value = '';
     setType.current.value = '';
     setSizes.current.value = '';
     setDescription.current.value = '';
     setTags.current.value = '';
    }
    return (
    <div className="modal fade" id="addProduct" tabindex="-1" role="dialog" aria-hidden="true">
      <div className="modal-dialog modal-lg">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">
            <div className="container">
              <div className="row justify-content-center">
                  <div className="col-md-6 text-center">
                    <figure className="figure">
                        <img src={urlPhoto} className="figure-img img-fluid rounded profile-img" alt="photo" />
                      </figure>
                  </div>
              </div>
              <div className="row justify-content-center">
                  <div className="col-md-6">
                    <form>
                        <div className="form-group">
                         <label for="photo">Url photo</label>
                          <input className="form-control" type="text" id="photo" placeholder="URL" ref={setPhoto} />
                          <label for="price">Price</label>
                          <input className="form-control" type="text" id="price" placeholder="Enter price" ref={setPrice} />
                          <label for="producer">Producer</label>
                          <input type="text" className="form-control" id="producer" placeholder="Enter producer" ref={setProducer} />
                          <label for="type">Type</label>
                          <input type="text" className="form-control" id="type" placeholder="Enter type" ref={setType} />
                          <label for="sizes">Sizes</label>
                          <input className="form-control" type="text" id="sizes" placeholder="Enter sizes(use ',')" ref={setSizes} />
                          <label for="description">Description</label>
                          <textarea className="form-control" id="description" rows="3" ref={setDescription}></textarea>
                          <label for="tags">Tags</label>
                          <input type="text" className="form-control" id="tags" placeholder="Enter tags" ref={setTags} />
                        </div>
                    </form>
                  </div>
              </div>
              <div className="row justify-content-center">
                  <div className="col-md-6">
                    <button className="btn general-button add-button-modal btn-block" onClick={addProduct}>Add product</button>
                    <button className="btn general-button delete-button btn-block" data-dismiss="modal">Canel</button>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ModalAddProduct;

标签： javascriptreactjs