Question

我有一个包含输入的React组件。该组件调度调用API的redux操作。我想展示一个＆＃34; SUCCESS＆＃34;每个组件的消息，但除了通过reducer之外，我无法解决如何获取消息的问题？但是，如果我是通过reducer进行的，它只是一个更新所有表单组件的一般消息？

// COMPONENT

export default class Stock extends React.Component {


constructor(props) {
    super(props);

    this.state = {
        value: "",
        id: this.props.hit['Name of Item'],
    }
  }

handleChange(e){
    e.preventDefault();
    this.setState({value: e.target.value});
}

handleClick(e){
    e.preventDefault();
    this.props.dispatch(updatePosStock(this.state.value, this.state.id));
}

render() {

    return (
            <div className="item">
                <p>{this.props.hit['Name of Item']}: {this.props.hit.Quantity}</p>
                <p>Stock ID: {this.props.hit.objectID}</p>
                <div className="control">
                <input className="input" value={this.state.value} type="text" onChange={this.handleChange.bind(this)} />
                <a href="" onClick={this.handleClick.bind(this)} >save</a>

                //MESSAGE TO DISPLAY HERE DEPENDING ON handleClick

                </div>
            </div>
        )
    }
}

// ACTION

export function updatePosStock(product, stock){
return function(dispatch) {
    axios.post('/api/v1/product/', {
        product,
        stock
    })
    .then((response) => {
        //console.log(response.data);
        return response.data;
        //dispatch({type: 'FETCH_PRODUCT_FULFILLED', payload: response.data})
    })
    .catch((error) => {
        console.log(error);
    })
}
}

Answer 1

如果我理解，该组件在页面上呈现多次，当您在一个组件上触发操作时，消息将分发到所有组件（因为组件之间无法区分。

所以，我将消息设置为：

[{
  message: 'Success',
  item: itemId
},
...]

当向api发送数据时，我会发送它正在发送的项目，并将此消息推送到消息数组，然后在您要显示消息的位置

{this.displayMessage(messagesVar, index) || ''}

因此，当显示消息不是虚假时，它会显示消息。

messageVar是您的reducer更新的内容。

显示消息功能类似于

(messages, id) => { 
     currentComponentMsgs = messages.filter((item) => item.id === id);
     return currentComponentMsgs.length > 0 
            ? currentComponentMsgs.mat((item) => item.message).reduce((a,b) => a + ', ' + b}
            : '');
  }

我没有时间检查它是否全部有效，但如果你正确地传播每个元素的id，使用这种模式你甚至可以在messagesVar中有多个消息记录器，因此它可以作为组件的一种邮箱。您可以在所有组件上使用它。

Answer 2

有两种方法可以实现这个目标

<强> 1。以数组形式保存您的回复消息（例如＆＃39;成功＆＃39;）

在这种情况下，您可以定义一个状态，例如feedback: [],。然后你将以这种方式设置消息

...
//dispatch({type: 'FETCH_PRODUCT_FULFILLED', payload: [ product : response.data]})
..

然后在您的组件中执行以下操作

...
<input className="input" value={this.state.value} type="text" onChange={this.handleChange.bind(this)} />
<a href="" onClick={this.handleClick.bind(this)} >save</a>

//MESSAGE TO DISPLAY HERE DEPENDING ON handleClick
<p className="feedback">{this.props.feedback[this.state.value] || ''}</p>

取决于您将状态导入组件的方式。

<强> 2。在您的redux状态或this.state={} 内创建另一个属性例如inputKey。然后通过inputKey设置handleClick(e, inputKeyValue)值您可以将inputKey作为第三个参数传递给调度的函数，并继续显示您组件中的上面应该显示。

我强烈建议您使用redux处理所有状态，并尽可能避免使用this.state和this.setState()。

我希望它有所帮助。

Answer 3

使用回调执行操作：

handleClick(e){
    e.preventDefault();
    this.props.dispatch(updatePosStock(this.state.value, this.state.id, 
    (code, message)=>{if (code==='OK')this.setState({displayMessage:true, message:"Successfully saved"})}));
}

///ACTION
export function updatePosStock(product, stock, callback){
return function(dispatch) {
    axios.post('/api/v1/product/', {
        product,
        stock
    })
    .then((response) => {
        callback('OK')
        return response.data;
        //dispatch({type: 'FETCH_PRODUCT_FULFILLED', payload: response.data})
    }) .catch((error) => { callback(error.code, error.message)
        console.log(error);
    })
}
}

如何根据redux操作结果更新React组件

3 个答案: