Question

我试图使过滤器项功能正常，但遇到以下代码：

const fs = require('fs');

// file path
const file_path = "./Test.txt";
/* test file content:
Hello World!
How are you
I'm fine thank you
*/

// Read file
fs.readFile(file_path, function read(err, data) {
    // Check for errors
    if (err) throw err;

    // Define where and what to insert
    let insert_after = "Hello World!\r\nHow ";
    let position = Buffer.from(insert_after).length;
    let new_text = "NEW TEXT";

    // Get rest of the file to write after inserted text
    var file_content = data.toString();
    file_content = file_content.substring(insert_after.length);

    // Create buffer
    var buffered_text = new Buffer(new_text + file_content);

    // Write to file
    var file = fs.openSync(file_path,'r+');
    fs.writeSync(file, buffered_text, 0, buffered_text.length, position);

    // Close it
    fs.close(file, (err) => { if (err) throw err; });
});

使用handleChange = e => this.setState({ [e.target.data.inputType]: e.target.value }, this.filterItems);时第二个参数filterItems的用途是什么？

Answer 1

将setState视为异步操作，如果在状态更改后需要执行某些操作，则应将其放入第二个参数回调中。

在此示例中，可能无法满足条件内的代码：

// Assuming isReady initial value is false.
this.setState({
 isReady: true
});

//At this moment this.state.isReady is probably still falsy.
if (this.state.isReady) { ... }

可以肯定的是，您需要在（之后状态）回调中传递代码。这样，您可以确保只有在新状态生效后才能执行代码。

// Assuming isReady initial value is false.
this.setState({
 isReady: true
}, () => {
  // React calls this function when the updates are applied.
  // Which means we are sure isReady have the new value.
  if (this.state.isReady) { ... }
});

检查文档以获取更多信息：

将setState（）视为请求而不是立即命令来更新组件。

setState（）的第二个参数是可选的回调函数，将在setState完成并重新呈现组件后执行。通常，我们建议将componentDidUpdate（）用于此类逻辑。

https://reactjs.org/docs/react-component.html#setstate

Answer 2

React的setState方法采用一个可选的第二个参数，它是一个回调：

setState()的第二个参数是可选的回调函数，将在setState完成并重新渲染组件后执行。通常，我们建议将componentDidUpdate()用于此类逻辑。（另请参见docs）。

setState异步工作。 React将累积状态更改请求，并在可能时执行它们。在那里，当您致电setState时，您将不知道状态实际何时更改。因此，您可以为setState提供一个回调，该回调在更改完成后执行。

或者更好的方法是使用componentDidUpdate，状态改变时，React会调用它。

Answer 3

setState第二个参数是一个回调。这意味着当您使用handleChange函数时，函数filterItems将在输入的设置状态后运行。

Answer 4

第二个参数是在状态对象更改后调用的回调（因为setState是异步的。）

this.setState({someState...}, () => console.log('someState is changed'))

如果您需要在状态更改后执行一些操作，最好在React componentDidUpdate中使用useEffect或^16.7钩子

反应-onChange事件/ setState

4 个答案: