Question

这是我使用上下文api传递给React类的函数它应该返回一些值。当Mobilebar是无状态组件时，此功能可以正常工作但是当我将Mobilebar更改为一个类时，此操作将无效。 console.log(this.props)返回{addFilter: ƒ, removeFilter: ƒ, getOptions: undefined}

<MyContext.Provider value={{
    getOptions: this.getOptions(),
    getItem: this.state.items,
    options: this.state.options,
    removeFilter: this.removeFilter.bind(this),
    addFilter: this.addFilter.bind(this)
}}>
    {this.props.children}
</MyContext.Provider>

 <MyContextConsumer>
        {({ getOptions, addFilter, removeFilter }) =>                 
            <Mobilebar
            addFilter={addFilter}
            removeFilter={removeFilter}
            getOptions={getOptions} />
        }
 </MyContextConsumer>

这是功能

getOptions() {
  if ((this.state.catList &&
      this.state.brandList &&
      this.state.colorList) &&
    (this.state.catList.length != 0 &&
      this.state.brandList.length != 0 &&
      this.state.colorList.length != 0)) {
    return [
      [this.state.brandList],
      [this.state.catList],
      [this.state.colorList]
    ]
  }
}

组件

export class Mobilebar extends React.Component {
    constructor(props) {
        super(props)
        this.options = this.props.getOptions;
     
        this.brand = [];
        this.category = [];
        this.color = [];
        this.i = 0;
        this.options ?
        (
        this.brand = this.options[0][0], 
        this.category =his.options[1][0], 
        this.color = this.options[2][0]
        ) : this.i = 1;
    }
    render() {
      
        return (
            <div className="itemlist" >
                <div >
                   <p>T_T_T_T</p>
                </div>
            </div>
        )
    }
}

我不知道自己在做什么错。请指导我（当Mobilebar是无状态组件时，此方法很好用）我在类中实现此功能的方式是否存在问题？为什么console.log(this.props.getOptions)返回undefined !!!!! 谢谢你的时间！！

正如你们指出的那样，我试图像这样绑定它

 getOptions: this.getOptions.bind(this)

以这种方式在Mobilebar中调用

 this.options = this.props.getOptions();

但是console.log(this.props.options)仍然是undefined

Answer 1

因为您正在执行函数而不是引用。

像这样引用函数：

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.ObjectOutputStream;

import org.apache.commons.io.serialization.ValidatingObjectInputStream;

class Test {
    public static void main(String[] args) {

        String object = new String("2323232");


        String filename = "file.ser";

        serialize(object, filename);

        deSerialize(filename);

    }

    private static void deSerialize(String filename) {
        String object1 = null;


        try {
            // Reading the object from a file
            FileInputStream fis = new FileInputStream(filename);

            final ValidatingObjectInputStream objectInStream = new ValidatingObjectInputStream(fis);
            objectInStream.accept(String.class);

            // Method for deserialization of object
            object1 = (String) objectInStream.readObject();

            objectInStream.close();
            fis.close();

            System.out.println("Object has been deserialized ");
            System.out.println("Test.deSerialize() " + object1);
        }

        catch (IOException ex) {
            ex.printStackTrace();
            System.out.println("IOException is caught");
        }

        catch (ClassNotFoundException ex) {
            System.out.println("ClassNotFoundException is caught");
        }
    }

    private static void serialize(String object, String filename) {
        // Serialization
        try {
            // Saving of object in a file
            FileOutputStream file = new FileOutputStream(filename);
            ObjectOutputStream out = new ObjectOutputStream(file);

            // Method for serialization of object
            out.writeObject(object);

            out.close();
            file.close();

            System.out.println("Object has been serialized");

        }

        catch (IOException ex) {
            System.out.println("IOException is caught");
        }
    }
}

由于使用了<MyContext.Provider value={{ getOptions: this.getOptions.bind(this), getItem: this.state.items, options: this.state.options, removeFilter: this.removeFilter.bind(this), addFilter: this.addFilter.bind(this) }}>，因此还需要像我的示例一样将其绑定。

将函数传递给React类

1 个答案: