Redux 存储中的数据在 Chrome 开发工具中可见，但实际上无法访问

问题描述 投票：0回答：1

我将 React 与 Redux 结合使用，为执行以下操作的操作实现 Redux-Thunk：

  1. Thunk 调用 
    axios.get()
  2. 第一个
    then()
    语句映射JSON以将键和值转换为前端规范
  3. 第二个 
    then()
    语句迭代 JSON 上的一个属性（0 - 5 个项目），为每个属性创建一组 
    axios.get()
    调用，并包装在 Promise 中。该数组被传递给一个 
    async/wait
    函数，确保这些承诺在继续之前全部得到解决。
  4. 第三个
    then()
    语句再次迭代列表，删除任何未定义的值，然后成功触发动作创建者。在 Chrome 开发工具上记录数据可验证所有数据是否存在，并且不存在未解决的承诺。
  5. 在 Chrome 开发工具中将此有效负载从化简器记录到映射数据的容器中，会导致同样的问题。数据存在于控制台中，但无法在任何地方访问。

我将提供下面的工作 js，尽管它在此片段中不起作用：

/* - - - - - - Actions - - - - - - -

Using thunk, promises, and async/await to insure data is present before sending to reducer 

*/

export function getSingleMessage(id, callback) {
  return function (dispatch) {
    const request = axios.get(`${ROOT_URL}getDialogue.php?message_id=${id}`)
    .then((resp) => {
      // Just reformatting JSON
      const { data } = resp;
      console.log('message: ', data)
      let formValues = {};
      let messageIds = [];

      formValues.dialogue_query = data.message_query;
      formValues.dialogue_text = data.message;
      formValues.message_id = data.messages_id;
      if (data.attachment) {
        formValues.attachment_text = data.attachment.text;
        formValues.attachment_fallback = data.attachment.fallback;
        formValues.image_url = data.attachment.image_url;
        if (data.attachment.actions) {
          /* 
            1) these buttons need unique id's
            2) the last unique id needs to not collide with any other id's of new buttons

            // Map through actions
              if key is 'name'
                button_text
              if key is 'type'
                action
          */
          
          let key = 0;
          

          formValues.buttons = data.attachment.actions.map( action => {
            let newAction = {};
            
            Object.keys(action).forEach( key => {
              let curr = action[key];
              let newCurrArr;
              let newCurr;
              if (key === 'name') {
                newAction.button_text = curr;
              }
              
              if (key === 'value') {
                if (curr.includes('Value[')) {
                  newCurrArr = curr.split('=');
                  newCurr = newCurrArr.pop();
                  newAction.button_action = newCurr;
                  curr = newCurrArr.join('=')
                  console.log('CURRRRRRR: ', curr)
                }
                if (curr.includes('message_id=')) {
                  newCurrArr = curr.split('=').pop();
                  console.log('NEWCURRARR: ', newCurrArr)
                  let newNewCurrArr = newCurrArr.split('&');
                  console.log('NEWNEWCURRARR: ', newNewCurrArr)
                  newCurr = newNewCurrArr.shift();
                  messageIds.push(newCurr);
                  newAction.message_id = Number(newCurr);
                  
                }
              }
            });

            newAction.id = key;
            key++;
            return newAction;
          })
        }
      }
      return [formValues, messageIds]
    })
    .then((resp) => {
    // creating array of promises, and resolving with async/await
      const formValues = resp[0];
      const messageIds = resp[1];

      const promises = messageIds.map((id) => axios.get(`${ROOT_URL}getDialogue.php?message_id=${id}`));
      console.log('PROMISES!!!!!! ', promises)

      if (formValues.buttons) {
        async function getPreviewMessages() {
          let resolvedPreviewMessages = await Promise.all(promises);
          return formValues.buttons.map((button, i) => {
          // setting previewMessages to buttons
            button.previewMessage = resolvedPreviewMessages[i];
            return button;
          })
        }
        getPreviewMessages();
      } 
      return formValues;
    })
    .then((formValues) => {
      // 
      console.log('RESP: ', formValues)
      // cleans up any null or undefined values
      
      for (let key in formValues) {
        if (formValues[key] === 'null' || formValues[key] === 'undefined') {
          formValues[key] = '';
          console.log(`formValues[${key}] = ${formValues[key]}`);
        }
        console.log(`formValues[${key}] = ${formValues[key]}`);
      }
      console.log('formValues: ', formValues)

      dispatch(fireOffSingleMessage({data: formValues}));
    })
    .catch((err) => {
      console.log(err)
      return err;
    })
    console.log('requesssssssst: ', request)
    callback();
    
  }
}

function fireOffSingleMessage(request) {
  // data is all resolved in Chrome Dev Tools
   console.log('FIRED OFF SINGLE MESSAGE~~~~~~', request)
  return {
    type: GET_SINGLE_MESSAGE,
    payload: request,
  }
}

// - - - - - - Reducer - - - - - - -

import { GET_SINGLE_MESSAGE, REFRESH_SINGLE_MESSAGE, ADD_BUTTON_EDIT, EDIT_BUTTON_EDIT, DELETE_BUTTON_EDIT } from '../constants';

export default (state = {}, action) => {
    switch(action.type) {
        case GET_SINGLE_MESSAGE: 
        console.log('Data is present!: ', action.payload.data.buttons)
            return action.payload;
        case REFRESH_SINGLE_MESSAGE:
            return {}
      
    // Not involved
        case ADD_BUTTON_EDIT:
            console.log('ADD_BUTTON_EDIT reducer fired off!', state);
            if (Array.isArray(state.data.buttons) && state.data.buttons.length > 0) {
              return {
                ...state, 
                data: {... state.data, buttons: [...state.data.buttons, action.button]}
              };  
            } else {
              return {
                ...state, 
                data: {... state.data, buttons: [action.button]}
              }; 
            }
        case EDIT_BUTTON_EDIT:
        console.log('EDIT_BUTTON_EDIT reducer fired off!', state);
            const newStateEdit = state.data.buttons.map(button => {
              if (button.id === action.button.id) {
                console.log('button.id: ', button.id)
                console.log('action.button.id: ', action.button.id)
                return action.button;
              } else {
                return button;
              }
            })
            return {
              ...state, 
              data: {... state.data, buttons: newStateEdit}
            }; 
        case DELETE_BUTTON_EDIT:
        console.log('DELETE_BUTTON_EDIT reducer fired off!', state);
            const newStateDelete = state.data.buttons.filter(button => button.id !== action.target);
            return {
              ...state, 
              data: {... state.data, buttons: newStateDelete}
            }; 
        default:
            return state;
    }
}

// - - - - Root Reducer - - - - -

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

import getAllDialogs from './getAllDialogs-reducer.js';
import handleMessages from './messages-reducer.js';
import handleMessage from './message-reducer.js'
import handleMessageId from './messageId-reducer.js'
import updateButtons from './buttons-reducer.js';
import renderButtonForm from './buttonForm-reducer.js';
import handleId from './buttonId-reducer.js';
import handleNewMessageQuery from './newMessageQuery-reducer.js';
import handleMessageQueries from './messageQueries-reducer.js';
import handleButton from './button-reducer.js';
import handleReRenderToggle from './reRenderToggle-reducer.js';
import handleContext from './context-reducer.js';

const rootReducer = combineReducers({
  dialogs: getAllDialogs,
  messages: handleMessages,
  message: handleMessage,
  messageId: handleMessageId,
  buttons: updateButtons,
  buttonForm: renderButtonForm,
  button: handleButton,
  buttonId: handleId,
  reRender: handleReRenderToggle,
  newMessageQuery: handleNewMessageQuery,
  messageQueries: handleMessageQueries,
  context: handleContext,
  form: formReducer,
});

export default rootReducer;

// - - - - - container - - - - - 


  renderFakeButtons(buttons = []) {
    const _that = this;
    buttons.forEach((button, i) => {console.log(button)});
    const { history, deleteButton, renderButtonForm, reRenderToggle, getSingleMessage, getSinglePreviewMessage } = this.props;
    // DATA LOGS IN DEV TOOLS!!!!
    console.log('BUTTONS: ', buttons)
    return buttons.map((button) => {
      // DATA LOGS IN DEV TOOLS!!!
      console.log('BUTTON: ', button)
      return (
        <div 
          className="top-margin"
          key={button.id}>
          <div className="row">
            <Card>
            <CardHeader
              title={`Button Text: ${button.button_text}`}
              subtitle={`Button Action: ${button.button_action}`}
              actAsExpander={true}
              showExpandableButton={true}
            />
            <CardText expandable={true}>
              <div>
{/*THIS IS WHERE I WOULD ACCESS THE PROPERTY EXPLICITLY*/}
                {JSON.stringify(button)}
              </div>
            </CardText>
            <CardActions>
              <FlatButton 
                label={`Next Message: ${button.message_id}`} 
                onTouchTap={function(){
                    getSingleMessage(button.message_id, () => {
                      history.push(`/message/edit/${button.message_id}`);
                    })
                  }
                }
              />
              <FlatButton 
                label="Delete Button"
                onTouchTap={() => { deleteButton(button.id, 'edit'); reRenderToggle(); }} 
              />
            </CardActions>
            </Card>
          </div>

        </div>
      )}
    );
  }
  
  render() {

    const _that = this;
    const { state, onSubmit, onTest, onBack, renderMessageQuerySelect, renderInputFields, renderTextAreaFields, injectButtonForm, renderUserTestSelectOptions } = this;
    const { messages, getMessageId, messageId, handleSubmit, renderButtonForm, buttons, reset, buttonForm, refreshSingleMessage, toggleMessageQueryField, newMessageQuery, initialValues, addButtons } = this.props;

    let titleName;

    if (messages.messages && messages.messages.dialog_name) {
      titleName = messages.messages.dialog_name;
    } else if (messages.messages && messages.messages.messageQuery) {
      titleName = messages.messages.messageQuery
    }

    return (
      <div>
        <MuiThemeProvider>

          <div className="row">
            <div className="col-md-6">
              <form onSubmit={handleSubmit(onSubmit.bind(this))}>
                <div className="form-group">
                <h4> Edit Message {messageId} from "{titleName}" </h4>
                  <Field
                    label="Message Query"
                    name="dialogue_query"
                    component={newMessageQuery ? renderInputFields : renderMessageQuerySelect.bind(this)}
                  />
                  New
                  <input  
                    type="checkbox"
                    onClick={toggleMessageQueryField}
                  />
                </div>
                <Field
                  label="Text of Message"
                  name="dialogue_text"
                  component={renderTextAreaFields}
                />
                <Field
                  label="Attachment Text"
                  name="attachment_text"
                  component={renderInputFields}
                />
                { state.error !== null ? <div className="form-group has-danger"><div className="text-help">{state.error}</div></div> : null }
                <Field
                  label="Attachment Fallback"
                  name="attachment_fallback"
                  component={renderInputFields}
                />
                { state.error !== null ? <div className="form-group has-danger"><div className="text-help">{state.error}</div></div> : null }
                <Field
                  label="Image Url"
                  name="image_url"
                  component={renderInputFields}
                />
                <div className="form-group">
                  <div>
                    <div
                      className="btn btn-primary"
                      onClick={function() {
                        renderButtonForm(); 
                      }}
                    >
                      Click to Add Buttons
                    </div>
                    
                    <div>
                    { initialValues && initialValues.buttons ? _that.renderFakeButtons(initialValues.buttons) : '' }
                    </div>

                  </div>
                </div>

                <Field
                  label="Test Primary User"
                  name="primary_test_user_id"
                  component={renderUserTestSelectOptions}
                />
                <Field
                  label="Test Secondary User"
                  name="secondary_test_user_id"
                  component={renderUserTestSelectOptions}
                />
                <button 
                  type="submit" 
                  className="btn btn-primary"
                >
                  Submit
                </button>
                <button 
                  type="submit" 
                  className="btn btn-primary buttons-margin"
                  onClick={handleSubmit(onTest.bind(this))}
                >
                  Test
                </button>
                <div className="btn btn-primary buttons-margin" onClick={reset}>Reset to Original</div>
                <div className="btn btn-danger buttons-margin" onClick={onBack.bind(this)}>Back</div>
              </form>
            </div>
            <div className="col-md-5">
              <div className="row">
                <div className="col-md-12">
                  {injectButtonForm(buttonForm)}
                </div>
              </div>
              <div className="row">
                <div className="col-md-12">
                  <div className="bottom-top-margin">



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

function validate(values) {
  const errors = {};
  if (!values.dialogue_text) {
    errors.dialogue_text = "Enter message text";
  }

  return errors;
}

MessageEdit = reduxForm({
  validate,
  form: 'MessageEditForm', // a unique name for this form
  enableReinitialize: true,
})(MessageEdit)

MessageEdit = connect(
  state => { 
    const newState = {
    dialogs: state.dialogs,
    messages: state.messages,
    messageId: state.messageId,
    initialValues: state.message.data,
    buttonForm: state.buttonForm.isRendered,
    buttonId: state.buttonId, 
    messageQueries: state.messageQueries,
    reRender: state.reRender,
    newMessageQuery: state.newMessageQuery,
    context: state.context,
  }
  console.log('MessageEdit newState: ', newState);
  return newState },
  { addButtons, postNewMessage, testMessage, getSingleMessage, refreshSingleMessage, deleteMessage, getDialogMessages, refreshButtons, deleteButton, refreshButtonId, refreshButtons, renderButtonForm, unRenderButtonForm, toggleMessageQueryField, getMessageId, getMessageQueries, reRenderToggle }
)(MessageEdit)

export default MessageEdit;

为什么根据 Chrome 开发工具，我的数据在 Thunk 中可用，但实际上无法访问？

javascript reactjs google-chrome-devtools
1个回答
0
投票

在你的渲染函数中你有......

{ initialValues && initialValues.buttons ? _that.renderFakeButtons(initialValues.buttons) : '' }

我假设没有出现。您实际上不需要在这里传递 

initialValues
作为参数，只需传递所有 props 即可。

尝试做这样的事情：

renderFakeButtons = (props) => {
  if (!props.initialValues.buttons) return;

  // do some rendering here
}

render() {
  const MaybeFakeButtons = this.renderFakeButtons;

  return (
    <div><MaybeFakeButtons {...this.props} /></div>
  )
}

我的猜测是，React 无法识别嵌套更新，因此树的 

initialValues
三元部分正在更新。尝试展开所有道具（如上所示），看看是否有效。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.