Question

我有一些从我的Redux商店回来的值，我想通过一个函数进行一些格式化和处理。

在下面的示例中，它似乎不起作用。任何人都可以为我提供一个解决方案，我可以从render方法运行函数，将prop数据传递给那些函数，以及从周围的JSX内联函数返回这些函数的值吗？

我希望能够运行相同的函数，并在render方法中的任何地方传递不同的道具。

这些是我在控制台中遇到的错误：

Uncaught TypeError: Cannot read property '_currentElement' of null

Uncaught TypeError: Cannot read property '__reactInternalInstance$7wovvyrz8nu' of null

Uncaught (in promise) TypeError: Cannot read property 'myValue' of null

我的代码：

import React, { Component } from 'react';
import { connect } from "react-redux";

@connect((store) => {
  return {
    propsData: store.myData.propsData
  };
})

class MyApp extends Component {

reverseFunc(value){

const reverseValue = value.reverse();

return {
  reverseValue
  }
}

render() {
  return <h1> My props data reversed is: {this.reverseFunc(this.props.propsData.myValue)} </h1>;
  }
}

export default MyApp;

Redux商店示例：

const initialState = {
  propsData: null
}

switch (action.type) {
case LOAD_PROPS: {
  return {
    ...state,
    propsData: action.data
   }
 }
}
return state
}

Answer 1

您无法在JSX中打印Object或Array，因此您唯一的选择是将它们转换为字符串，这就是我在示例中添加toString的原因。如果你正在翻转字符串，请取消注释func的第3行并删除reverseFunc的第一行。

＆＃13;

import React, { Component } from "react";
import { connect } from "react-redux";

@connect(store => {
  return {
    propsData: store.myData.propsData
  };
})
class MyApp extends Component {
  reverseFunc(value){
    if(value !== null){
      return value.reverse().toString();
    }
    // OR
    // return value.split('').reverse().join('');
  }
  render() {
    return (
      <h1>
        My props data reversed is: {this.reverseFunc(this.props.propsData)}
      </h1>
    );
  }
}

export default MyApp;

＆＃13;

将道具传递给渲染方法中的函数

1 个答案: