如何注入改变组件状态的函数？

Question

我想在我的组件之外保留一些功能以便于测试。但是，我无法使用这些函数更改状态，因为它们无法直接引用组件的状态。

所以我目前有一个 hacky 解决方案，我将函数设置为一个变量然后调用 this.setState。有没有更好的convention/more有效方法来做到这一点？

Tester.js中的示例函数代码：

const tester = () => {
  return 'new data';
}

export default tester;

App.js 中的示例组件代码（无导入）：

class App extends Component {
    constructor() {
        super();
        this.state = {
            data: ''
        }
    }

    componentDidMount(){
        let newData = tester();
        this.setState({ data: newData })
    }

    render() {
        return(
            <div>{this.state.data}</div>
        )
    }
}

Answer 1

你可以像这样绑定你的测试函数（这种方法不适用于箭头函数）：

function tester() {
  this.setState({ data: 'new Data' });
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: '',
    };
    this.tester = tester.bind(this);
  }

  componentDidMount() {
    this.tester();
  }

  render() {
    return (
      <div>{this.state.data}</div>
    );
  }
}

但我更喜欢一种更简洁的方法，您不需要函数来访问 this（也适用于箭头函数）：

function tester(prevState, props) {
  return {
    ...prevState,
    data: 'new Data',
  };
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: '',
    };
  }

  componentDidMount() {
    this.setState(tester);
  }

  render() {
    return (
      <div>{this.state.data}</div>
    );
  }
}

Answer 2

You can pass a function to setState() 将 return 一个表示组件新状态的新对象。所以你可以这样做：

const tester = (previousState, props) => {
  return {
    ...previousState,
    data: 'new data',
  };
}

class App extends Component {
    constructor() {
        super();
        this.state = {
            data: ''
        }
    }

    componentDidMount(){
        this.setState(tester)
    }

    render() {
        return(
            <div>{this.state.data}</div>
        )
    }
}

原因是您现在可以在 tester 函数中访问组件的先前状态和道具。

如果您只需要访问应用内不变的 static 占位符值，例如 Lorem Ipsum 或其他，那么只需将数据导出为 JSON对象并像这样使用它：

// testData.js
export const testData = {
  foo: "bar",
  baz: 7,
};

...

// In your app.jsx file
import testData from "./testData.js";

const qux = testData.foo; // "bar"

etc.

如何注入改变组件状态的函数？

How to inject functions that change component state?

javascript

reactjs

conventions