Question

如果我走错了路，请告诉我。我是新来的人，要重新处理，重击。后端为零。我必须做测试任务。后端server.js是按原样提供给我的。我将尝试提出一个问题。

我很难过。我还没有进步一个星期。

我有一个App.component。它具有三个子组件发票，产品，客户。在渲染它们之前，我会调用发票，产品，客户。我正在使用API中的JSON。如果单击客户，路由器将吸引他们。如果单击一个客户，路由器将打开一个模式编辑窗口。进一步。为了在模式窗口中显示一位客户的数据，我从传入的URL中获取ID。我使用提取API成功获得了一个客户json。接下来，我想在商店中记录customerToEdit数据，以便稍后绘制其可见性。我不明白为什么无法写下store.customerToEdit {按id提取的客户Obj}

index.js片段：

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
const serverPath = 'http://localhost:8000';
const customersUrl = serverPath + '/api/customers/';
const productsUrl = serverPath + '/api/products/';
const invoicesUrl = serverPath + '/api/invoices/';

const customers = fetch(customersUrl)
  .then(response => response.json())
  .catch( alert );

const products = fetch(productsUrl)
  .then(response => response.json())
  .catch( alert );

const invoices = fetch(invoicesUrl)
  .then(response => response.json())
  .catch( alert );

Promise.all([invoices, products, customers]).then(values => {
  store.dispatch({type: 'ADD_INVOICES', payload: values[0]});
  store.dispatch({type: 'ADD_PRODUCTS', payload: values[1]});
  store.dispatch({type: 'ADD_CUSTOMERS', payload: values[2]});
});

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'));

App.js片段：

export default connect(
  state => ({ // map state to props
    customers: state.customers,
    products: state.products,
    invoices: state.invoices,
    customerToEdit: state.customerToEdit
  }),
  dispatch =>({
    onGetCustomer: (id) => {
      const asyncGetCustomer = (id) =>{
        return dispatch => {
          let apiUrl = pathes.ServerPath + '/api/customers/'+id;
          fetch(apiUrl)
            .then(response => response.json())
            .then(response => {
              // alert('empty or '+ response.name);
              dispatch({type: types.SET_CUSTOMER, payload: response});
            });
        }
      };
      dispatch(asyncGetCustomer(id));
    }
  })
)(App);

客户（红色用户）

import * as types from '../constants/ActionTypes';

export default function customers(state = [], action) {// reducer
  switch (action.type) {
    case types.ADD_CUSTOMERS:
      return action.payload;

    case types.SET_CUSTOMER: {
      console.log('SET_CUSTOMER = ', action.payload);debugger;
      alert('SET_CUSTOMER = ' + action.payload);
      return {...state, customerToEdit: action.payload}
    }
    default:
      return state;
  }
}

console.log（'SET_CUSTOMER ='，action.payload）;

SET_CUSTOMER =  {id: 211, name: "Bob Smith", address: "215 Market St, 
Dansville CA 94325", phone: "555-534-2342", createdAt: "2019-07- 
25T10:55:41.116Z", …}

错误：

TypeError: Cannot read property 'name' of undefined
ModalContent.render
D:/0_work/data-hub/grip-soft/src/components/customerModal/customer-edit-modal.component.js:110
  107 | <Form.Group controlId="formBasicName">
  108 |   <Form.Label>Name</Form.Label>
  109 |   <Form.Control onChange={this.textInput} type="text"
> 110 |                 value={this.props.customerModalContent.name}
      | ^  111 |                 placeholder="Enter Name" />
  112 | </Form.Group>
  113 | <Form.Group controlId="formBasicAddress">

这是指向github的链接。 https://github.com/anvictor/grip-soft

要运行应用，您需要命令npm启动两个文件夹。

grip-soft/> npm start

将启动React应用

grip-soft/src/test npm start

将启动server.js

如何通过ID将数据获取到模式编辑窗口？

0 个答案: