您应该可以通过为useState提供一个函数来修复此问题，该函数返回您希望使用的初始值，例如useState(() => createNewTileBag())。
简要说明如下：

// This is an example function that will wait (roughly) X seconds before returning the value 1
// This will help to illistrate the differences in the two methods.
const expensiveTask = (seconds) => {
    var start = new Date();

    while((new Date() - start) / 1000 < seconds);

    return 1;
}

// This example shows how using a command such as useState(expensiveTask(5)) is processed each render
// The useState code has been split into two lines to improve clarity.
const Example1Component = () => {
    // The expensive value is processed.
    // This expensive value will be processed every render.
    const initialExpensiveValue = expensiveTask(5);

    // The expensive value is passed to the useState to use as the inital value.
    // The expensive value will only be inserted into the state on component mount,
    // on all other renders it is ignored.
    const [expensiveValue, setExpensiveValue] = useState(initialExpensiveValue);

    return (
        <div>
            {expensiveValue}
        </div>
    )
}

// This example shows how using a command such as useState(() => expensiveTask(5)) is processed each render
// The useState code has been split into two lines to improve clarity.
const Example2Component = () => {
    // The function is created (not run).
    // This function will be created on each render.
    // Function creation performace impact in most situations can be considered insignificant.
    const initialExpensiveValueFn = () => expensiveTask(5);

    // The function is passed to the useState and will be run to get the inital value.
    // The function will only be run on component mount, on all other renders it is only created.
    const [expensiveValue, setExpensiveValue] = useState(initialExpensiveValueFn);

    return (
        <div>
            {expensiveValue}
        </div>
    )
}